960網(wǎng)格系統(tǒng)使用方法

去官方下載960 Grid System，并解壓到本地目錄(比如css)。

按照順序引用三個(gè)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">

在容器內(nèi)定義Grids (網(wǎng)格)。網(wǎng)格的總數(shù)必須等于container(容器)的數(shù)量

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

設(shè)置網(wǎng)格的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>

清除浮動(dòng)

塊與塊之間必須添加"clear"以清除浮動(dòng)

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

參考資料[ ]

參考資料

久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WIKI使用導(dǎo)航

站長(zhǎng)百科導(dǎo)航

站長(zhǎng)專題

960網(wǎng)格系統(tǒng)使用方法

參考資料[ ]