960GridSystem

1,官网

http://960.gs/

2,源码

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

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

image 

3,使用

image

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为推动的列数。“拉”的方法与之类似。)

image

image

.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/

作者:未签收
出处:http://www.cnblogs.com/tchoyi/
声明:除特别标明之文章外,大部分整理自网络和小部分来自自己感悟,如有侵犯原作者版权的行为,可以随时与我联系!我会及时删除!

原文地址:https://www.cnblogs.com/tchoyi/p/2887234.html