960 Grid System 网格系统

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

使用方法：

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

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

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

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

<link
rel
=
"stylesheet"
type
=
"text/css"
media
=
"all"
href
=
"css/text.css"
/
>

<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(容器)的数量

<div
class
=

″
container_16″>

<div
class
=

″
grid_4″>
宽度为：60px*4=240px-20px=220px(20px为左右各10px间隙)</
div
>

<div
class
=

″
grid_12″>
宽度为：60px*12=720px-20px=700px(20px为左右各10px间隙)</
div
>

</
div
>

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

alpha类：左边间隙为0，margin-left: 0;

omega类：右边间隙为0，margin-right: 0;

使用方法

<div
class
=
”grid_2 alpha”>
左边间隙为0</
div
>

<div
class
=
”grid_2 omega”>
右边间隙为0</
div
>

6、留空

prefix：左边留空

suffix：右边留空

代码如下

<div
class
=
"container_16"
>

<div
class
=
"grid_1 prefix_13 suffix_2"
>

<p
>

宽度为40px，左留空13*60px=780px；右留空2*60px=120px

</
p
>

</
div
>

</
div
>

7、清除浮动

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

<div
class
=
"container_16"
>

<h2
>

16 Column Grid

</
h2
>

<div
class
=
"grid_16"
>

<p
>

940px

</
p
>

</
div
>

<!-- end .grid_16
-->

<div
class
=
"clear"
>
 
</
div
>

<div
class
=
"grid_1"
>

<p
>

40px

</
p
>

</
div
>

<!-- end .grid_1
-->

<div
class
=
"grid_15"
>

<p
>

880px

</
p
>

</
div
>

</
div
>

参考：

960 Grid System 演示