960-Grid-System

1,官网

http://960.gs/

2,源码

https://github.com/nathansmith/960-Grid-System/tree/master/code/css

第一个是reset.css，用于重置样式；第二个文件是text.css，定义了一些元素的基本样式；第三个是核心文件960.css

 

3,使用

4,几点注意

.container_12和.container_16

表示容器,都是960px的宽度,水平居中,但他们的不同之处是包含不同数量的列。.container_12被分为12列，而.container_16被分为16列。当然也有.container_24,被分为24列

.alpha和.omega

用于清除多余间隔

这个因为在960网格系统里，每一列都是左右各有边距10px，这是考虑到有些容器会留有10px作为边上的缓冲，而且列与列中间的宽度会达到20px

.prefix_XX和suffix_XX

在每个单元网格的前面或后面添加空白的列,也就padding-left,padding-right

.push_XX和.pull_XX

相当于块的位置定位,也就(left,top),如下图

(想象自己在屏幕里面，站在左边，这时候你就可以“推”容器了，方法是给它加上.push_i类，i为推动的列数。“拉”的方法与之类似。)

.clear和.clearfix:after

用于消除浮动元素

(关于浮动参考 CSS float和CSS clear , CSS 清除浮动)

5,几个使用960gs的站点(官网提供)

http://5by5.tv/

http://fedoraproject.org/

6,参考:

http://www.cnblogs.com/frankfang/archive/2011/06/05/2073310.html

http://ued.taobao.com/blog/2008/09/grid_systems/