960 Grid System 学习

如果你到现在还没有听说过960 Grid System（以下简称960 GS），那作为Web开发者，你真的是有点out了。简单的讲，960 GS就是一种基于网格的布局框架，使用它可以极大地简化页面的布局工作。要是你象我一样不太擅长做页面这些活，那它就是为你准备的。

自出道以来，960 GS就受到了大家的热捧，关于它的介绍文章和示例简直铺天盖地，随便用Google一搜就有一长串列表供你选择。有鉴于此，本文并不打算在拾人牙慧，再嚼现饭，而只是简要说明其用法以及核心css文件，960.css，中各class的说明。各看官权且把本文作为960 GS的Cheat Sheet吧。

用法

在Web工程里引入960.css，你就可以安心使用其定义的各个class了。除了这个必须引入的文件，960 GS提供的下载包中还有两个css文件值得一提：reset.css和text.css。这两个文件的主要作用是为了消除浏览器间显示差异准备的，前者消除了html标签在各浏览器间的差异，而后者则主要针对的是字体。如果你有过YUI的使用经验，应该对此似曾相识。不错，在YUI里也有对应的文件：reset.css和fonts.css。此外，YUI的CSS框架中还多了两个文件：base.css和grid.css，前者是为所有浏览器设置一个统一的基线，而后者则类似960.css，但使用要比960 GS复杂。

对于这类消除浏览器差异的css文件，一般建议还是使用为妙。一来是因为简单，使用它们除了在页面开始引入之外就没有其他工作量；二来是用上它们还保证了应用在不同浏览器间的一致性，真是方便实惠。但若是工程里还使用了YUI这类框架，个人倾向使用YUI的css，原因无他，毕竟Yahoo的名头大嘛!

Class说明

960.css里提供了以下class：

container_12 和container_16，用于最外层的div，它们确定页面采用12列布局还是16列布局。grid_*，代表n列宽。12列对应1～12，16列对应1～16。使用时，一行内的grid数值之和等于container数值。clear，清除上一行的样式，一般在分行时使用。push_*和 pull_*，将div往内推或往外拉n列宽。prefix_*和suffix_*，在div的前后留n列宽空白。alpha和omega，分别应用到内嵌表格的第一个和最后一个，其目的是为了去掉表格之间的空白。因为框住内嵌表格的外部表格本身已经有了自己与其他表格之间的空白，因此内嵌表格和外部表格之间的空白一般是不美观，不必要的。

在使用时需注意960 GS的限制：

页面的宽度限制为960px。上述class只限定了div的宽度，高度由开发者自行控制。只提供了12列、16列和24列布局。功能单一，只聚焦简化布局。

如果你的需求超出以上范围，最好就另寻高明了。这里有个简单的例子帮助你了解960 GS的使用：

‍

跟Grails的配合

Grails的主攻方向是Web工程，这也正是960 GS的用武之地。将Grails的Sitemesh文件和960 GS结合起来，可以大大减轻页面布局的工作量。这篇名为《Grails模板和960 Grid System》的文章里给出了这种方法的示例，同时它还结合了Grails的模板机制：

‍

以上便是文章示例工程的main.gsp摘录。关于详细的说明，有兴趣的读者可以访问原文。

至于960 GS的介绍文章，我推荐这篇《The 960 Grid System Made Easy》，窃以为是此类文章中最好的之一。

注：本文摘自：http://hi.baidu.com/guolibo/blog/item/6c782bf57c523330bd310977.html