960网格系统的使用
虽然开始要费时间学习， 但是磨刀不误砍柴工，学习CSS框架能够节省更多的开发时间，显著提高工作效率。下面是作用960网格系统的方法。
-
去官方下载960 Grid System，并解压到本地目录(比如css)。
-
按照顺序引用三个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" />
-
定义Containers(容器)，分为两种12(每份80px)和16(每份60px)等分，总宽度为960px。
<div class="container_12">
<div class="container_16">
-
在容器内定义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>
-
设置网格的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>
-
留空
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>
-
清除浮动
块与块之间必须添加"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>
-
自定义样式。
<div class=”container_12″>
<div id=”sidebar” class=”grid_2 alpha”>sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”comments” class=”grid_2 omega”>comments</div>
</div>
由于CSS使用优先级的形式来觉得如何解释样式，而id要比class的优先级高。这样我们就可以在我们的独立CSS文件中以id选择符创建个性化的样式了。如果凑巧有的样式属性与960相同但值又不同，浏览器会优先选择你的CSS文件中的样式。
此文由站长百科用户Zhou3158于2010年2月3日 (星期三) 07:32最后更改于站长百科