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 演示