深入理解BFC和Margin Collapse

作者:白牙 日期:2013-10-11 点击:27

BFC其实没有那么神秘,BFC只是一个独立的布局环境,理解BFC对我们日常的布局设计上有着重要的帮助,并且BFC和Margin Collapse之间有着重要关联。另外文中还提到了clear float时候所产生'clearance'的计算。希望大家有所收获。

为什么要用和如何使用字体图标

作者:大漠 日期:2013-10-10 点击:30

图片是有诸多优点的,然而目前在网站设计这行业面临各种各样的挑战。图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。图片还有一个缺点就是不能很好的进行“缩放”,因此,有时候在“响应式设计”中需要使用图像的最好解决方案就是不去使用图片。由于位图给Web制作带这诸多的不便,为了解决这些问题,CSS3给大家带来一个新的属性@font-face。

使用@font-face制作图标已不是什么秘密,也不是什么新技术,在互联网上这样的教程铺天盖地。但是我们依然给大家介绍一篇@font-face制作图标的教程。这篇教程主要向大家阐述了”为什么要用和如何使用字体制作图标“,从教程中,你可以找到@font-face制作图标的优势与不足,同时也能找到要如何得到制作图标的字体。

前端开发必备!Emmet使用手册

作者:白牙 日期:2013-10-09 点击:51

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具,它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它,并且它还支持CSS3新属性和自动拓展各个浏览器的前缀,这对于开发者来说实在是一个福音!本文详细为你介绍了所有的HTML以及CSS的缩写方法,妈妈再也不用担心你HTML/CSS了!

结合智能选择器的语义化的CSS

作者:白牙 日期:2013-10-06 点击:57

或许很多前端开发人员都会困惑一个问题,在书写HTML和CSS的时候,结构更重要还是功能更重要?在一些热门的框架例如Twitter Bootstrap里面我们也会看到使用a标签来作为按钮的元素的例子,这样是否合理?一起来读一读这篇文章吧,或许能够解开你的疑惑。

使用Grunt构建任务管理脚本

作者:大漠 日期:2013-10-06 点击:32

Grunt是构建Web开发的一个系统,但它创建比较困难。在这个指南中,你将学会如何配置Grunt创建一个现代的Web项目。当你完成教程中的配置之后,你的Gruntfile将具有:从源目录中向目标目录复制文件;删除构建文件;编译文件和给他们添加前缀;编译;压缩和文件;编译;当文件修改后自动构建源文件;运行开发者服务器 等。接下来的内容根据的《Writing an Awesome Build Script with Grunt》所译,与大家一起学习Grunt如何构建一个Web开发系统,希望大家喜欢。

Sass Mixins——支持Retina的Icons Sprite

作者:大漠 日期:2013-10-03 点击:38

Sprites(国内称之为雪碧图),平常很多时候都是依赖于手工在制作软件中完成,或者依赖于第三方插件自动生成Sprites图。这样虽能实现雪碧图,但在来很多工作量。如果你开始使用Sass或者Compass,你可以发现他们有一个强大的功能,可能使用Sass的mixins自动生成雪碧图。特别是在Retina显屏的时代,使用Sass的mixins生成雪碧更让我们前端人员变得轻松。这篇的《Sass Mixins Icons Sprite with Retina Support》所译,在文章中详细介绍了如何使用Sass的Mixins自动生成普通显屏和Retina显屏的雪碧图。希望这篇文章对大家有所帮助。

停止使用很多的Sass变量

作者:大漠 日期:2013-09-28 点击:35

变量是Sass中很重要的一个部分,不过如何更好的使用好Sass中的变量也是一个很关键的知识点。从定义变量到使用变量,也延伸出类似于定义类名以及使用多类名的问题。Sass中的变量需要语义化定义变量名吗?需要定义多个变量名吗?在您使用Sass过程中是否也探讨过类似的问题?如果没有,我们就以这篇文章开始吧,一起探讨这个很有意义的问题。本文根据的《Stop using so many Sass variables》所译,初步探讨了Sass中变量名的定义以及是否多用更多的变量名。希望大家能喜欢。

七个高度有效的媒体查询技巧

作者:大漠 日期:2013-09-26 点击:43

随着移动设备以及用户终端种类的不断增加,响应式设计在Web是运用越来越广泛。而响应式设计中媒体查询又起着举足轻重的作用,可以说离开了媒体查询,响应式设计就没有了他的灵魂。换句话说,响应式设计做的优秀不优秀,看媒体查询的使用就能知道。到目前为止,智能移动设备的普及化,我们的响应式设计应该考虑移动先行。那么移动先行如何实现呢?媒体查询又对其有什么使用呢?欲想了解,烦请阅读根据的《7 Habits of Highly Effective Media Queries》译文,让你把媒体查询运用的更灵活。

页面