960 Grid System 网格系统

---

960 Grid System网格系统是一个 CSS Framework，使用CSS框架能够节省很多的开发时间，显著提高工作效率。

使用方法：

1、去官方下载960 Grid System，并解压到本地目录(比如css)。

2、按照顺序引用三个CSS文件。

在HTML文件中嵌入代码(css为文件所在目录)：

1. <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
2. <link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
3. <link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

3、定义Containers(容器)，分为两种12(每份80px)和16(每份60px)等分，总宽度为960px。

• <div class="container_12">
• <div class="container_16">

4、在容器内定义Grids (网格)。

网格的总数必须等于container(容器)的数量

1. <div class=″container_16″>
2.     <div class=″grid_4″>宽度为：60px*4=240px-20px=220px(20px为左右各10px间隙)</div>
3.     <div class=″grid_12″>宽度为：60px*12=720px-20px=700px(20px为左右各10px间隙)</div>
4. </div>

5、设置网格的Margins（间隙）。

• alpha类：左边间隙为0，margin-left: 0;
• omega类：右边间隙为0，margin-right: 0;

使用方法

1. <div class=”grid_2 alpha”>左边间隙为0</div>
2. <div class=”grid_2 omega”>右边间隙为0</div>

6、留空

• prefix：左边留空
• suffix：右边留空

代码如下

1. <div class="container_16">
2. <div class="grid_1 prefix_13 suffix_2">
3.     <p>
4.         宽度为40px，左留空13*60px=780px；右留空2*60px=120px
5.     </p>
6. </div>
7. </div>

7、清除浮动

块与块之间必须添加"clear"以清除浮动

1. <div class="container_16">
2.     <h2>
3.         16 Column Grid
4.     </h2>
5.     <div class="grid_16">
6.         <p>
7.             940px
8.         </p>
9.     </div>
10.     <!-- end .grid_16 -->
11.     <div class="clear">&nbsp;</div>
12.     <div class="grid_1">
13.         <p>
14.             40px
15.         </p>
16.     </div>
17.     <!-- end .grid_1 -->
18.     <div class="grid_15">
19.         <p>
20.             880px
21.         </p>
22.     </div>
23. </div>

参考：

960 Grid System 演示