编辑“960网格系统使用方法”

<span style="text-align:center; border:1px solid #000; float:right; padding:6px;"><strong>导航:</strong> [[960网格系统|上一页]] | {{template:CSS导航}}</span>
<div style="clear:both;"></div>

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

*按照顺序引用三个[[CSS]]文件。
<pre>
<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" />
</pre>

*定义Containers(容器)，分为两种12(每份80px)和16(每份60px)等分，总宽度为960px。
<pre>
<div class="container_12"> 
<div class="container_16"> 
</pre>

*在容器内定义Grids (网格)。网格的总数必须等于container(容器)的数量 
<pre>
<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>
</pre>

*设置网格的Margins（间隙）。
alpha类：左边间隙为0，margin-left: 0; 
omega类：右边间隙为0，margin-right: 0; 

使用方法:
<pre>
<div class=”grid_2 alpha”>左边间隙为0</div>
<div class=”grid_2 omega”>右边间隙为0</div>
</pre>

*留空

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

代码如下:
<pre>
<div class="container_16">
<div class="grid_1 prefix_13 suffix_2">
    <p>
        宽度为40px，左留空13*60px=780px；右留空2*60px=120px
    </p>
</div>
</div>
</pre>

*清除浮动

块与块之间必须添加"clear"以清除浮动 
<pre>
<div class="container_16">
    <h2>
        16 Column Grid
    </h2>
    <div class="grid_16">
        <p>
            940px
        </p>
    </div>
    <!-- end .grid_16 -->
    <div class="clear">&nbsp;</div>
    <div class="grid_1">
        <p>
            40px
        </p>
    </div>
    <!-- end .grid_1 -->
    <div class="grid_15">
        <p>
            880px
        </p>
    </div>
</div>
</pre>



==参考资料==
[http://gray.tugesha.com 参考资料]



[[category:960网格系统使用指南|9]]
[[category:CSS框架|9]]
[[category:CSS|9]]
[[Category:W3C|9]]