分类目录归档：CSS+DIV

2015
09-02

推荐 10 个超棒的 CSS3 代码生成工具

新的在线工具和WebApp帮助开发者快速地创建网站而不用写代码。前端开发已经在框架和代码库方面有了很大的进展。但是许多开发者已经忘记了代码生成器在构建网站时的价值。下面的资源是完全免费的WebApp，这些WebApp能够为模板，渐变，甚至浏览器属性的前缀生成CSS3代码。如果你是前端开发者，这些资源可以帮助你节省很多时间，并可以为以后的项目提供可复用的源码。1.CSS3GeneratorCSS3Generator是... 继续阅读 >
2015
08-20

18个你可能不相信是用CSS制作出来的东西

与流行的看法相反，CSS不仅仅是用来提供一个WEB页面的基本风格，以使它看起来更有吸引力。还有很多其他的事情，CSS也可以做的很好。由于它创建动画和交互的能力，CSS集合HTML以及JavaScript给WEB开发者提供了尝试不同方法的机会。浏览器就像一个空的画布，WEB开发者可以在这里尽情的发挥。下面是18个人们用CSS创建的又酷又有创造性的东西的例子，从原始字符到有趣的动画，有很多激励你自己将时间花费在CSS上。1.&nbs... 继续阅读 >
2015
08-06

几个CSS的黑科技

这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box{border-radius:4px;}稍微高端一点的是这样的：.box{border-radius:4px6px6px4px;}然而，终极黑科技是这样用的：.box{border-radius:5px5px3px2px/5px5px1px3px;}对，它可以赋8个值，没见过？... 继续阅读 >
2015
08-01

Web 设计师不可错过的 25+ CSS 工具

当涉及到简化CSS设计和开发相关的工作时，工具总能创造奇迹。值得指出的是，绝大多数的网页设计者和开发人员对不同的CSS工具都感到兴奋，这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。当涉及到执行一些重复的CSS标签时，这些值得推荐的CSS工具是最好的选择。在本文中，我为你收集25+个CSS工具，它们将通过最大限度的发挥CSS的功能来帮助你建立神奇的网站。来，让我们一起来看看吧！... 继续阅读 >
2015
07-16

HTML 5：足以改变我们未来生活的十项提示

HTML5代表着Web发展的未来方向。无论大家身为开发人员还是高级用户，关于这一Web编程新基础的种种态势都值得各位高度关注。如果大家还没有意识到，那我们先要强调一句——Web世界已经彻底改变了。时至今日，网络银行、实时视频聊天以及短视频共享已经成为Web领域的立足根基，而接下来还将有更多极具突破性的趋势及成果不断涌现。正因为如此，这一根基才需要迎接进一步升级。超文本标记语言（简称HTML）... 继续阅读 >
2015
07-14

Flex 布局语法教程

网页布局（layout）是CSS的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。本文介... 继续阅读 >
2015
07-10

15个实用的CSS在线实例教程

前端技术可以说是必须学习的一个技术，现在做网站都需要懂DIV、CSS，在国内很多企业招网页设计师都要求会写基本的前端代码，所以前端技术是必须了解的，对网页设计师本身也有帮助，今天向大家推荐一些不错的实用CSS教程，学习这些可以提高自己的CSS技能，了解一些新的好用的用法，在日后项目也许会用上。用CSS背景给SVG上色有关SVG图像、cssmask、给背景SVG添加颜色等一些用法。查看教程CSS网球... 继续阅读 >
2015
05-15

css中单位 px、em 的区别

在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因为有一部法律来约束他们... 继续阅读 >
2015
05-15

应不应该使用inline-block代替float

CSS布局创建网站,浮动绝对占据了很大的比例.大块区域如主内容及侧边栏,以及在其中的小块区域,都可以看到浮动的影子.这里浮动是唯一的解决方案吗?浮动通常表现正常，但有时候搞起来会很纠结。特别是处理内部容器中的浮动，比如对一排图片使用浮动后对齐出现问题。Inline-block是我们的另一种选择。使用这种属性可以模拟部分浮动的特征，而不需要处理一些浮动带来的问题。Inline-block不是什么新鲜话题了，估计你也用... 继续阅读 >
2015
04-24

CSS 3中弹性盒布局的最新版

CSS3中弹性盒布局的最新版概述在CSS3中，CSSFlexibleBox模块为一个非常重要的模块，该模块用于以非常灵活的方式实现页面布局处理。虽然可以使用其他CSS样式属性来实现页面布局处理，但是如果使用CSSFlexibleBox模块中定义的弹性盒布局技术，可以根据屏幕尺寸或浏览器窗口尺寸自动调整页面中各局部区域的显示方式，即实现非常灵活的布局处理。虽然CSSFlexibleBox模块已经被公布了好几年，但是自开始公布... 继续阅读 >
2015
03-14

CSS3飘带状3D菜单 菜单带小图标

这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。在线演示        源码下载 2、jQuery动画二级下拉菜单对于jQuery菜单，大家已经非常熟悉了，我们也已经分享过很多jQuery菜单和CSS3... 继续阅读 >
2015
02-13

你该学点HTML/CSS知识的9大理由 HOT

每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘。或许你会莫名其妙，程序员学代码那是理所应当，但是作为一个作家、营销人员、财务工作者甚至是工人，为什么也需要学习代码呢？好吧，下面我会告诉你为什么懂点HTML和CSS会让你的职业生涯发生巨大的改变。学习技术不仅仅是生产助理亦或是印刷设计师的事——无论你是小企业主、销售经理、事件协调员还是魔术师，都能让你受益于HTML和CSS知识。不要怀疑，让我给... 继续阅读 >
2015
02-07

专为控制打印设计的CSS样式 HOT

大多数Web设计师对打印控制还不是很熟悉，他们往往更迷恋像素，而不是打印机。在现实世界中，很多人依赖从网站上打印网页来参考：在这个数字时代,在一些特殊的场合，很多人手中还会拿着纸张。Web开发人员可以采取一些措施来弥补打印机和液晶屏之间的差距。为打印机而不是屏幕设计的样式/*样式将只应用于打印*/@mediaprint{}注＊也可通单独的CSS文件,设置link的media="print"属性来指定此样式专用于打印<l... 继续阅读 >
2015
02-02

即将推出的CSS4 Level 4 Selectors(第4级选择器) 推荐

注*CSS4草案发布了。是时侯学习一些新的CSS，不是吗？我们都习惯去学一个又一个的新前端框架，但是我们常常忘记了，作为我们每天使用的网络核心语言CSS本身也在不断地推出一些新功能。W3C编辑草案从1月15日的CSSSelectorsLevel4draft草案描述了一次CSS的飞跃。在我们开始之前，你应该知道：本文中的CSS，很多都无法在浏览器中工作。即使是最新的浏览器。这是因为，它们还是一些草案-处于起草... 继续阅读 >
2015
01-27

CSS 强制换行和超出隐藏实现

一、强制换行word-break:break-all;只对英文起作用，以字母作为换行依据。word-wrap:break-word;只对英文起作用，以单词作为换行依据。white-space:pre-wrap;只对中文起作用，强制换行。word-break:break-all和word-wrap:break-word都是能使其容器如div的内容自动换行，它们的区别在于：1、word-break:break-all假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断... 继续阅读 >
2015
01-27

CSS中设置margin:0 auto; 水平居中无效的原因分析

很多初学制作网页的朋友，可能会遇到的一个常见问题，就是在CSS中加了margin:0auto;却没有效果，不能居中的问题，margin:0auto;的意思就是：上下边界为0，左右根据宽度自适应，其实就是水平居中的意思，在这里说两个典型的错误引起的不能居中的问题：1、没有设置宽度<divstyle="margin:0auto;"></div>看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题。2、没声明DOCTYPE1）DOCTYPE... 继续阅读 >
2015
01-03

优化你的CSS 推荐

系列概述在移动web兴起的年代，速度优化重新被大家重视起来，因为手机的网络环境和性能比PC端差了很多，估计大家也能感觉到用手机打开网页的时候，能明显感觉到页面蜗牛般的速度。这个系列的优化会以移动环境为基础，当然绝大多数规则也同样适合PC端。优化的基本原则速度优化有一些基本思路，提前总结一下按需加载(只加载你需要的)并行(让串行的事情并行起来)压缩(通过压缩减少体积)缓存(利用缓存，减少请求等... 继续阅读 >
2014
12-13

10个不可忽视的CSS代码片段 HOT

本文介绍10个非常有用的CSS代码片段，绝对不容忽视。包括在整个容器中垂直对齐、元素拉伸为全屏高度、跨浏览器图像灰度、动画背景等，使用平率高，经常无法完全达到想要效果。现在有了这10个CSS代码片段，我们可以将这些效果做得更好。1、垂直对齐在使用CSS的时候，你可能会出现疑问，我如何在容器中将文本或元素垂直对齐。现在使用CSS3Transforms，我们可以更有效解决这问题，如下：.verticalcenter{position:relative;top:... 继续阅读 >
2014
12-03

CSS 类名的单词连字符：下划线还是连接符？

本文的部分内容整理自我对此问题的解答：命名CSS的类或ID时单词间如何连接？-知乎问题CSS类或ID命名时单词间连接通常有这几种写法：驼峰式：solutionTitle、solutionDetail用横杠连接：solution-title、solution-detail下划线连接：solution_title、solution_detail应该采用哪种写法呢？选择的时候是出于个人习惯还是有别的考虑？看了下豆瓣，美团，淘宝的源码，都是采用solution_t... 继续阅读 >
2014
12-03

7件你不知道但可以用CSS做的事

不管你信不信，CSS和JavaScript开始重叠，就像CSS增加了更多功能一新。在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时，人们对于JavaScript和CSS是如何重叠的感到惊讶。今天，我将重点强调你能用CSS完成的7种工作——不需要通过JavaScript或图片。CSS@supports在使用一些浏览器可能没有的特性时，每一个优秀的前端开发者都需要进行特性测试。特性测试一直以来都是由JavaScri... 继续阅读 >
2014
12-03

十款超棒的CSS框架加速Web开发

CSS又称层叠样式表，是用来为结构化文档（如HTML文档或XML应用）添加样式的计算机语言。目前最新的CSS3已被大部分浏览器支持，下一代CSS4还在开发当中。这里小编为大家整理了一些非常好用的CSS开发框架，如果加以合理利用，定能加速你的Web开发进程。Pure这是Yahoo最新推出的一款CSS框架，它只有HTML和CSS，没有使用任何JavaScript语言。总大小只有4.4kb，但功能却非常丰富，支持响应式样式和各种导航、表格、表单、... 继续阅读 >
2014
12-03

Web 开发中 20 个很有用的 CSS 库

在过去的几年中，CSS已经成为一大部分开发者和设计者的最爱，因为它提供了一系列功能和特性。每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发。像CSS库，框架，应用这样的工具能够为开发者做很多事，而且可以使开发者创造出创新立异的WEB应用。在这篇文件章中我们找到了一系列对开发者有用的CSS库，它们能帮助开发者在一定的期限内取得有创造性和创新性的成果。我们希望这个列表能有助于您的开发并为您提供方... 继续阅读 >