960网格系统使用方法

导航: 上一页 | HTML | XHTML | aJAX| XML | DreamWeaver | PhotoShop | Drupal | javascript | php

• 去官方下载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>

参考资料

参考资料