首先，我前所未有地听说了栅格布局的分门别类有这么多，包括960 Grid System、YAML CSS Framework、YUI Grids CSS 等数十种栅格技术思想，而且各有各的特点，至今还有很多门户网站正在使用这一快捷高效的网页布局方式，比如说：Yahoo、淘宝、MySpace、新浪、网易等等。

当然，方法是有很多，也无所谓优劣，只有最适合自己的、最适合项目的才会是最好的。所以我决定采取全面撒网，重点捕鱼的学习策略，先对 hou 介绍的几种网页栅格布局方式进行比较，选择其中一种便于学习便于上手的方法应用实践到自己的项目中去。

本文的体会也就主要谈一下对淘宝DPL-栅格生成器使用的一些体验。

相比较之下，我更倾向于 hou 分享的那款淘宝DPL-栅格生成器，可以设定我们最常用的两栏、三栏布局，还有自定义宽度，在不改变其 HTML 结构的基础上，只需要改一个class，就可以实现两栏互换，主栏自适应宽度等效果，同时也不用担心在各浏览器下的表现问题，完美兼容。

个人观点：

1、 淘宝DPL-栅格生成器就是网页栅格思想的提炼工具，它比960 Grid System、YAML CSS Framework、YUI Grids CSS那些框架更精简，因为栅格生成器无需事先加载一段CSS框架库，它是按需生成的，所以小巧且实用。

2、很遗憾但很幸运的是，栅格生成器这样的工具只能协助我们完成大的结构布局。遗憾的是，很多细节的布局我们还需亲力亲为；幸运的是，我们不能受工具摆布，网页栅格化甚至便捷化的工具只能提供给我们一个很好的思路，但是绝不能成为依赖于它的理由。

3、栅格化和面向对象的 OOCSS 是一个相对的概念，前者是从大的整体布局框架而言，后者是从细节的样式上来说，如果是大型项目开发，这两者结合使用也许是个不错的选择。

那天晚上还在和任平生GG讨论网页栅格化布局的优势与劣势，当然结果还是没有争出个胜负，可以说栅格化是一个比较古董级的网页布局方法，但是还不至于被淘汰，我觉得无论是网页设计师还是前端架构师都应该了解网页栅格化这个概念，对我们做网站是会有所帮助的。

对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。分解如下：

1、HTML 部分：

2、CSS 部分：

这样看来就很简单了吧，父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。如此简单如此神奇。

亮点总是在文末，大家请注意了，崔凯帅哥在我的逼迫下，开通了一个前端征婚群，欢迎搞前端的 MM 加入：105677671 哇哈哈哈哈～～～

昨天无聊的时候又去关注了一下这个博客，发现它的所有站外链接后都会显示一个“2”，其实这个问题很早就发现了，只是一直没有深究，昨天实在被这个“2”搞迷糊了，就想深究一下下，难道 CSS 森林是想要表达所有外链都很2这个意思吗？不会吧。。。在同事丁锅锅的提点下，终于揭开了这个“2”的神秘面纱。

原来这个“2”只是在 Firefox 下的效果，在 Chrome、IE8 等浏览器下就不是表现为“2”了，而是新窗口打开的一个小图标，确切来说，那并不是一个图标，而是一个用特别字体显示出来的文字图案。效果如图：

情不自禁地翻了一下它的 CSS 样式表，发现它的数字“2”用的是 Webdings 字体，难道这个字体可以让数字转换成奇妙的图案吗？顺着这个思路 Google 了一下，不 G 不知道，一 G 还真是如此。Webdings 字体转换成一些有趣的类似于小图标的符号，这样就可以省去了切图的麻烦，但是让我没想到的是 CSS 森林用的渐进增强居然把 Firefox 也给抛弃了，更奇妙的是，IE 居然反常地可以支持这个字体的转化。

最后，把它做成了一个 DEMO，用非 Firefox 和 Opera 的朋友可以看一下。神奇吧？不相信你的眼睛，你可以复制下来看看，其实你复制的就是一串数字。

主要难度集中在以下几点：

1、自适应宽度，这个倒不是最难的，难的是宽度撑开后顶部“树枝”的分叉节点要保存居中。

2、自适应列数，这个倒也不是最难的，难的是随着列数的改变要保持整个“树干”居中位置。

3、最后一个节点和第一个节点处的拐脚处非得特殊照顾一下。

花了点时间研究了一下，终于做了一个还比较满意的，扩展性比较强的 DEMO，自己作为记录写下来，说不定哪天我自己也用的上。分解如下：

1、HTML 部分：

因为篇幅有限，我只写了三列的 HTML，更多可见 DEMO 页。

2、CSS 样式部分：

样式中用到了四张小图片，分别处理节点的拐脚处，本来想用纯 CSS 解决的，但是为了效果，还是用了一些小图，不知道大家有没有更好的解决办法？

3、脚本部分

可以看到，这是一段非常简单的 jQuery，作用就是获取第一列和最后一列，分别加上拐点的背景图片。好了，收工。

差点忘了今天是元宵节，外面鞭炮放得还挺热闹的，大家元宵节快乐啦~

为了总结比较这两种效果，我特地做了两个 DEMO。

我们先看 DEMO1，这个图片放大效果是 CSS2.0 下的，具体的 HTML 和 CSS 如下：

优点：兼容性好，所有浏览器支持。

缺点：1、分别需要大图和小图两张图片。

2、因为用到 hover，所以在 IE6 下只有 a 标签才可以，IE6 不支持 hover 以外的 伪类。

然后我们再来看 DEMO2，这个图片放大效果是 CSS3.0 下的，部分 HTML 和 CSS 是和上面的样同的，我也就再重复写一遍了，具体的 HTML 和 CSS 如下：

优点：只需要一张图片就可以实现。

缺点：1、IE 不支持。

2、小图被强行扯大，分辨率不变的前提下，放大后会显得模糊。

到底哪个方法更好？这还要看具体需求。比如，我在顶部的几个小图标上就是用的 CSS3 的方法，因为放大的倍数不大，所以也不是很模糊，IE就无视了。

话再说回来，我把 CSS3 的 transform 属性拿来和 CSS2 中的图片放大效果比较，实在是太太太屈才了。因为一方面，CSS2 的那个方法严格意义上来说并不是放大方法，只是用 hover 伪类来模仿的效果，再者， transfrom 不仅仅是可以作用于图片，文字也同样有效，而且放大只是 transform 的一个值，它还能旋转，如果你的浏览器不是 IE，可以把鼠标放到评论头像上看看效果，那也是用 transform 实现的，很好很强大吧。

实现这样的导航垂直滚动条的方法很多，关键是要知道其中原理也就不难了，从本站的这个垂直导航可以看出，它的基本效果就是可以随着浏览器的滚动条而滚动，换言之，这个垂直导航的位置相对于浏览器窗口是固定不变的。下面我提供两种实现的方法，各有特点，按需选择吧。因为两种方法的 HTML 和 CSS 部分大致相同，所以我就写在一个 DEMO 里了，这样也可以方便大家比较。

两种方法，一种是用纯 CSS 实现的（ DEMO 中对应的 id="l"），另一种是用 jQuery 实现的（ DEMO 中对应的 id="r"）。

HTML 部分：

CSS 部分：

jQuery 部分：

两者可以比较一下，用 jQuery 的方法在拖动浏览器滚动条的时候会有抖动的瑕疵，而用纯 CSS 的方法则很平滑，但是我们也会发现，CSS 的方法中用到了 HACK 和 expression，这都是我们写页面时需要尽量避免的，特别是 expression，不可多用，会影响 IE 浏览器的性能，RP 差一些的还会引起 IE 假死和崩溃。

另外，关于“上天、入地”这样锚链接之间的互相滚动的效果可以参看这篇文章，这里就不重复说明了。

先撇开 CSS 不说，关于面向对象这个概念，我记得接触得最多的也就是大学里才学过的面向对象程序设计了，虽然基本上已经把那些程序语言忘得差不多了，只能用一些关键词来描述我所理解的什么“面向对象”，那就是：对象、类、封装、重用性、灵活性、扩展性。

其实对于 CSS 而言，本来就有类和重用性的概念在里面了，那什么是 OOCSS 呢？我看了一些相关资料，总结了一下自己的看法。我们现在所认为的 WEB 标准就是将结构、表现、行为这三者分离，CSS 就是负责其中的“表现”，而 OOCSS 认为“表现”还可以分离为容器和内容，可能这么说还比较抽象。我来举个例子，OOCSS 就是一个句子，句子的主谓宾就是它的“容器”，句子的定语、状语、补语就是它的“内容”，我们把主谓宾把握住了，就可以基本固定整个页面的结构，而定状补只是用来修饰整个页面结构，OOCSS 的理念是把这些修饰样式分离出来，这样做的理由就是可以为日后页面快速改版留有接口和余地。

仅用文字来描述 OOCSS 总会有些无力，再举个例子：

我们这里只需要关注我给它加的 class，首先，我用 WanGe 这个 class 来定义这个 div，基本结构可以写在这个 class 里，然后用其他 class 来描述这个 div，比如说，我们知道 WanGe 是个 blogger，而且很 sexy，那就可以这样定义，如果哪天我们需要对页面进行改版，给 WanGe 增加一些特性，比如说 handsome，那可以继续把这个 class 加在 sexy 后面，或者替换 sexy 这个 class。

那我们为什么不把 blogger、sexy、handsome 这些相对应的值都加在 WanGe 这个 class 值里面呢？这就是 OOCSS 的奥义所在了，迅速改版！仅是替换/增加/减少一个 class 就可以大范围改变页面风格，另外，这样也可以避免触动到页面基本布局的样式结构。

那什么时候适合用 OOCSS 呢？我个人认为，OOCSS 的真正关键在于它的灵活性和扩展性，像博客这样的小型网站并没有太大的必要使用这种方法，因为这样会增加不少 class，让页面结构相对累赘了不少，大型的门户企业网站倒是很适合使用。再回头来看我现在的主题，也无意之间用到了一些 OOCSS 的理念，比如，我把所有圆角效果分离出来单独列了一个 class="radius"，不过这也只能体现这个 OOCSS 原理的雏形。

唠了一大篇，各位路过的大神们，不知有何高见呢？

我们知道，像 border-radius 这样一些 CSS3 的属性即使在高级的 Firefox、Chrome 等浏览器中也是不能直接支持的，必须要加上 -moz-、-webkit- 这样的私有属性前缀才可以让浏览器们支持。但是很遗憾的是，在样式表中加上这些私有属性之后就无法通过 W3C 的验证，CSS2.0 说我们家族里没有 border-radius 这样的属性，CSS3.0 说我们家族里没有 -moz-、-webkit- 这样的怪胎。多杯具呀。

Willin 大师的方法让私有属性的 W3C 验证不再杯具（不知道是不是 Willin 大师的首创，至少这招我是从他那里学来的）。怎么一个方法呢？其实很简单，就是把样式写进 Javascript，W3C 验证会无视脚本，多简单的原理，只是我们都没有想到这一点。

举个例子，如下样式：

如果要写进 Javascript 的话就应该是：

就是这样简单的转换就可以帮助你的浏览器私有属性通过 W3C 的验证，当然有了这个原理，我们还可以扩展一下，比如说 IE 的滤镜、expression 等被 W3C 认为是非法的东东都可以扔进脚本里绕开验证。

感谢 Willin 大师的这个方法，让我的 HTML5 主题顺利通过了 HTML5 和 CSS3 的 W3C 验证。有个神级的重构牛人和我说过这样一句话：验证不是目的，验证只是手段，通过验证来检验自己在编写样式的时候有没有出现低级的语法错误。这句话很受用，但是为了我那对代码有着洁癖的完美主义，我还是用了这样那样的手段让自己的网站通过这样那样的验证。

好了，发完牢骚，切入正题，没有原始的 CSS 属性可以实现文字渐变，那就自己动手，模拟一个渐变文字吧。先来看一个 DEMO 吧。下面上代码：

1.HTML 很简单，就一行：

注意看哟，这个不是一般的 h2 里套 a，还有一组 span 空标签哟~这文字渐变的关键就在这组 span 上了。

2.再来看 CSS 部分：

稍微解释一下吧，把这里的 h2 作为相对定位，然后 h2 的子标签以 h2 为基准绝对定位，横向平铺一张 1px 宽的透明渐变图片，使 span 同级覆盖在 a 之上，是不是很帅呀？

另外，仔细的童鞋也会注意到这里用到了透明图片，那在 IE6 下是不是会杯具呢？当然会，所以还需要 fix ie6 的 PNG 透明问题，这里就不作介绍了，我在 DEMO 中已经用上了一种我最常用最喜欢的方法，有兴趣的可以研究下 DEMO 的源码。

如果你不服气，很正常，要一下子改掉这个坏习惯没有说服力的证据很难让人信服。还是先来看一个 DEMO 吧，一定要用 IE 浏览器看哟，因为在 IE 浏览器菜单中的查看-文字大小有“最大、较大、中、较小、最小”五个层次选项可以调节，看到什么变化了吗？是的，用 px 作为单位的那行文字无论怎么调节都是固定不变的，用 em 作为单位的那行文字就可以随着浏览器对字体大小控制而变化。这就是两者的区别！

继续刨根问底一下，那么在写样式的时候，我们怎么控制 em 和 px 呢？换句话说，em 和 px 的比例关系是什么呢？已经有前辈找到了答案，在未经 reset 的浏览器都符合以下比例：16px = 1em，也就是说那么 10px = 0.625em。如此一来，我们可以在 body 中添加 font-size:62.5%; 于是乎，1em = 16px*62.5% = 10px; 1.2em = 12px; 1.4em = 14px。

有的同学要问了，不是16px = 1em 吗？怎么一会儿又变成 10px = 1em 了？没错，这就是 em 的魅力所在，也就是之前所提到的 em 是相对单位的优势。这样转换是为了我们可以更方便地使用 em 这个单位，因为这就是一个十倍的关系。

是不是对 px 和 em 有了一个全新的认识呢？现在再回过头来看看这个 DEMO，我想你会有兴趣看看此页的源代码，你也可以自己试着写一个比较体会一下 px 和 em。希望没有把你弄晕。