出處：W3CPLUS??

轉(zhuǎn)自Airen的博客

說起CSS的布局，有太多了，現(xiàn)在常見的有固定布局、流體布局、彈性布局。在百度上搜了下960網(wǎng)格布局的方法。發(fā)現(xiàn)Airen的博客有具體介紹960布局的情況，就轉(zhuǎn)載了下。

960gs使用其實很方便，大家只要到其官網(wǎng)下載整個網(wǎng)格系統(tǒng)的代碼，然后應(yīng)用進(jìn)行就OK了。聽起來很方便，但沒有接觸的同學(xué)還是感覺有點難一樣，那么要是你對此很感興趣，大家就跟我一起看看我是如何使用960gs吧。網(wǎng)絡(luò)上下載下來的960網(wǎng)絡(luò)系統(tǒng)，是一個完整的系統(tǒng)，但我個人認(rèn)為系統(tǒng)中有很多代碼是我們沒有用到的，完全可以不需要那部分，我們需要的只是其中的格子系，用這些格子系來幫助我們實現(xiàn)各種不同的布局，下面我就給大家介紹一下我取用的部分網(wǎng)格。

首先我將960網(wǎng)格分成兩大類，其中一類是“固定尺寸”，而另一大類就是“流體尺寸”，也就是大家所說的自適應(yīng)布局；接著我在將其中的每大類分成四小類，它們就是：grid12、grid16、grid24和grid32。這四小類的意思就是——我將一個整體布局容器分成了12份（或者說分成了16份或24份或32份）。大家可以先來看看下圖所示：

這樣一來，我們在960Grids中就有幾個概念性的詞語，而且這幾個詞語大家必須了解清楚他們的含義，這將對你使用960gs會有極大的幫助：

容器名稱：這里固定網(wǎng)格我取名叫"container"，然后針對每小類取名"container12、container16、container24、container32、"；針對自適應(yīng)網(wǎng)格我取名“containerFluid”，同樣針對每個小類“containerFluid12、containerFluid16、containerFluid24和containerFluid32”，當(dāng)然如果你只是針對其中一種寫到你的頁面的話，你只需要一個統(tǒng)一的名“container”；

網(wǎng)格：網(wǎng)格就是你將容器分成的份數(shù)，其中每一份就稱為網(wǎng)格，我取名為“grid”，并且具有“grid1~grid32”。其中你使用是的“container12”那么他對應(yīng)的最多網(wǎng)格就是“grid12”，其他的依此類推 ；

網(wǎng)格寬度（列寬）：這個就是每個網(wǎng)格的寬度了，這個就跟具體的列數(shù)和列與列之間的間距很有關(guān)系的，

網(wǎng)格間距：這個是指相鄰兩個網(wǎng)格之間的距離；

內(nèi)容寬度：這個寬度是指內(nèi)容所占的寬度，這里只有兩種情況，一種是內(nèi)寬度為“950px”另一種為“940px”

下面大家一起來看一個“container16”的示意圖：

通過上面的名詞大家對“960gs”應(yīng)該有了一定的了解，下面我們來看具體的應(yīng)用。

HTML Markup

首先，我們使用這個960網(wǎng)格系統(tǒng)，我們也需要一個HTML的結(jié)構(gòu)，下面我們先來看一下其結(jié)構(gòu)：

<div class="container12 clearfix"><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div><div class="grid1">1</div></div>

上面的代碼其實很簡單，我就在一個大的“div.container12”中放置了12個“div.grid1”；其實這個是很有意義的：其中“div.container12”表示的是我們使用了960網(wǎng)格系統(tǒng)中的12列那種，換句話說，就是把“div.container12”這個容器分成了12份；而其中“div.grid1”就是其中的每一份，我們放置了12個在其中，這樣剛好等于容器“div.container12”所分的份數(shù)。其實我也也還可以這樣使用的：

<div class="container12 clearfix"><div class="grid4">4</div><div class="grid8">8</div></div>

這里我們就把“div.container12”同樣分成了12份，但我們這個容器中只有兩列，其中一列是4個“grid”也就是“div.grid4”,另一列就是8個“grid”，就是“div.grid8”，但他們的總數(shù)都是等于容器“div.container12”所分的份數(shù)。從上面的兩個HTML Markup告訴我們這樣一個原理：容器內(nèi)所有列數(shù)之和要等于容器所分的份數(shù)

CSS Code

有了結(jié)構(gòu)后，我們需要的就是定義這個網(wǎng)格系統(tǒng)的樣式，定義樣式之前我們需要知道上面我們所講的幾個參數(shù)的值，我先拿“960gs”的“12”列為例：

容器總寬——container12 = 960px;

網(wǎng)格數(shù)——Number of columns = 12；

網(wǎng)格寬度——Column width = 60px；

網(wǎng)格之間的距離——Gutter width=20px；也就是margin-left: 10px;margin-right: 10px

內(nèi)容寬度——Content width=940px

總寬度——Full width=960px，這個總寬度總是等于容器的寬度，換句話總是960px。因為我們這里所討論就是960gs。

知道這些參數(shù)后，我們的樣式就可以這樣寫了：

/*=========================================================================*Container: width=960px;*Html Markup* <div class="container12 clearfix">* <div class="grid4">4</div>* <div class="grid8">8</div>* </div>*=========================================================================*/.container12 {margin-left: auto;margin-right: auto;width: 960px;} /*==========================================================================*container12: *Column width= 60px *Number of columns= 12px *Gutter width= 20px *Content width=940px *Full width=960px*=========================================================================*/.container12 .grid1,.container12 .grid2,.container12 .grid3,.container12 .grid4,.container12 .grid5,.container12 .grid6,.container12 .grid7,.container12 .grid8,.container12 .grid9,.container12 .grid10,.container12 .grid11,.container12 .grid12 {display:inline;float: left;position: relative;margin-left: 10px;margin-right: 10px;}.container12 .grid1 {width:60px;}.container12 .grid2 {width:140px;}.container12 .grid3 {width:220px;}.container12 .grid4 {width:300px;}.container12 .grid5 {width:380px;}.container12 .grid6 {width:460px;}.container12 .grid7 {width:540px;}.container12 .grid8 {width:620px;}.container12 .grid9 {width:700px;}.container12 .grid10 {width:780px;}.container12 .grid11 {width:860px;}.container12 .grid12 {width:940px;}

到些我們就完成了一個簡單的960gs中的12grids布局。上面展示的代碼中，我們完全可以把“container12”換成“container”，因為在我們平時制作中，我們可以完全的確定好需要采用的是“container12”還是“container16”或者別的。我在這里只是為了更好的說明問題。前面我也提到過，我們有兩大類，各四小類的網(wǎng)格布局，下面我附上他們的代碼，和相關(guān)的demo給大家參考：

960網(wǎng)格固定布局

先給大家展示的是960網(wǎng)格的四種固定布局：

1、12列布局

/*=========================================================================*Container: width=960px;*Html Markup* <div class="container12 clearfix">* <div class="grid4">4</div>* <div class="grid8">8</div>* </div>*=========================================================================*/.container12 {margin-left: auto;margin-right: auto;width: 960px;} /*==========================================================================*container12: *Column width= 60px *Number of columns= 12px *Gutter width= 20px *Content width=940px *Full width=960px*=========================================================================*/.container12 .grid1,.container12 .grid2,.container12 .grid3,.container12 .grid4,.container12 .grid5,.container12 .grid6,.container12 .grid7,.container12 .grid8,.container12 .grid9,.container12 .grid10,.container12 .grid11,.container12 .grid12 {display:inline;float: left;position: relative;margin-left: 10px;margin-right: 10px;}.container12 .grid1 {width:60px;}.container12 .grid2 {width:140px;}.container12 .grid3 {width:220px;}.container12 .grid4 {width:300px;}.container12 .grid5 {width:380px;}.container12 .grid6 {width:460px;}.container12 .grid7 {width:540px;}.container12 .grid8 {width:620px;}.container12 .grid9 {width:700px;}.container12 .grid10 {width:780px;}.container12 .grid11 {width:860px;}.container12 .grid12 {width:940px;}

請看對應(yīng)的DEMO效果：

2、16列布局

/*=========================================================================*Container: width=960px;*Html Markup* <div class="container16 clearfix">* <div class="grid8">8</div>* <div class="grid8">8</div>* </div>*=========================================================================*/.container16 {margin-left: auto;margin-right: auto;width: 960px;}/*==========================================================================*container16: *Column width= 40px *Number of columns= 16px *Gutter width= 20px *Content width=940px *Full width=960px*=========================================================================*/.container16 .grid1,.container16 .grid2,.container16 .grid3,.container16 .grid4,.container16 .grid5,.container16 .grid6,.container16 .grid7,.container16 .grid8,.container16 .grid9,.container16 .grid10,.container16 .grid11,.container16 .grid12,.container16 .grid-one-third,.container16 .grid-two-thirds,.container16 .grid13,.container16 .grid14,.container16 .grid15,.container16 .grid16 {display:inline;float: left;position: relative;margin-left: 10px;margin-right: 10px;} .container16 .grid1 {width:40px;}.container16 .grid2 {width:100px;}.container16 .grid3 {width:160px;}.container16 .grid4 {width:220px;}.container16 .grid5 {width:280px;}.container16 .grid-one-third {width: 300px;}.container16 .grid6 {width:340px;}.container16 .grid7 {width:400px;}.container16 .grid8 {width:460px;}.container16 .grid9 {width:520px;}.container16 .grid10 {width:580px;}.container16 .grid-two-thirds {width: 620px;}.container16 .grid11 {width:640px;}.container16 .grid12 {width:700px;}.container16 .grid13 {width:760px;}.container16 .grid14 {width:820px;}.container16 .grid15 {width:880px;}.container16 .grid16 {width:940px;}

DEMO

3、24列布局

/*=========================================================================*Container: width=960px;*Html Markup* <div class="container24 clearfix">* <div class="grid16">8</div>* <div class="grid8">8</div>* </div>*=========================================================================*/.container24 {margin-left: auto;margin-right: auto;width: 960px;}/*==========================================================================*container24: *Column width= 30px *Number of columns= 24px *Gutter width= 10px *Content width=950px *Full width=960px*=========================================================================*/.container24 .grid1,.container24 .grid2,.container24 .grid3,.container24 .grid4,.container24 .grid5,.container24 .grid6,.container24 .grid7,.container24 .grid8,.container24 .grid9,.container24 .grid10,.container24 .grid11,.container24 .grid12,.container24 .grid13,.container24 .grid14,.container24 .grid15,.container24 .grid16,.container24 .grid17,.container24 .grid18,.container24 .grid19,.container24 .grid20,.container24 .grid21,.container24 .grid22,.container24 .grid23,.container24 .grid24 {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}.container24 .grid1 {width:30px;}.container24 .grid2 {width:70px;}.container24 .grid3 {width:110px;}.container24 .grid4 {width:150px;}.container24 .grid5 {width:190px;}.container24 .grid6 {width:230px;}.container24 .grid7 {width:270px;}.container24 .grid8 {width:310px;}.container24 .grid9 {width:350px;}.container24 .grid10 {width:390px;}.container24 .grid11 {width:430px;}.container24 .grid12 {width:470px;}.container24 .grid13 {width:510px;}.container24 .grid14 {width:550px;}.container24 .grid15 {width:590px;}.container24 .grid16 {width:630px;}.container24 .grid17 {width:670px;}.container24 .grid18 {width:710px;}.container24 .grid19 {width:750px;}.container24 .grid20 {width:790px;}.container24 .grid21 {width:830px;}.container24 .grid22 {width:870px;}.container24 .grid23 {width:910px;}.container24 .grid24 {width:950px;}

DEMO:

3、32列定位

/*=========================================================================*Container: width=960px;*Html Markup* <div class="container32 clearfix">* <div class="grid16">8</div>* <div class="grid16">8</div>* </div>*=========================================================================*/.container32 {margin-left: auto;margin-right: auto;width: 960px;}/*==========================================================================*container32: *Column width= 20px *Number of columns= 32px *Gutter width= 10px *Content width=950px *Full width=960px*=========================================================================*/.container32 .grid1,.container32 .grid2,.container32 .grid3,.container32 .grid4,.container32 .grid5,.container32 .grid6,.container32 .grid7,.container32 .grid8,.container32 .grid9,.container32 .grid10,.container32 .grid11,.container32 .grid12,.container32 .grid13,.container32 .grid14,.container32 .grid15,.container32 .grid16,.container32 .grid17,.container32 .grid18,.container32 .grid19,.container32 .grid20,.container32 .grid21,.container32 .grid22,.container32 .grid23,.container32 .grid24,.container32 .grid25,.container32 .grid26,.container32 .grid27,.container32 .grid28,.container32 .grid29,.container32 .grid30,.container32 .grid31,.container32 .grid32,.container32 .grid-one-third,.container32 .grid-two-thirds {display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;}.container32 .grid1 {width:20px;}.container32 .grid2 {width:50px;}.container32 .grid3 {width:80px;}.container32 .grid4 {width:110px;}.container32 .grid5 {width:140px;}.container32 .grid6 {width:170px;}.container32 .grid7 {width:200px;}.container32 .grid8 {width:230px;}.container32 .grid9 {width:260px;}.container32 .grid10 {width:290px;}.container32 .grid-one-third {width: 310px;}.container32 .grid-two-thirds {width: 630px;}.container32 .grid11 {width:320px;}.container32 .grid12 {width:350px;}.container32 .grid13 {width:380px;}.container32 .grid14 {width:410px;}.container32 .grid15 {width:440px;}.container32 .grid16 {width:470px;}.container32 .grid17 {width:500px;}.container32 .grid18 {width:530px;}.container32 .grid19 {width:560px;}.container32 .grid20 {width:590px;}.container32 .grid21 {width:620px;}.container32 .grid22 {width:650px;}.container32 .grid23 {width:680px;}.container32 .grid24 {width:710px;}.container32 .grid25 {width:740px;}.container32 .grid26 {width:770px;}.container32 .grid27 {width:800px;}.container32 .grid28 {width:830px;}.container32 .grid29 {width:860px;}.container32 .grid30 {width:890px;}.container32 .grid31 {width:920px;}.container32 .grid32 {width:950px;}

DEMO

上面展示了四種固定布局的效果，最后提醒大家一下，每個實例都需要加上清除浮動的代碼:

/*===============================================================================* clear and clearfix => clear:both* clearLeft => clear:left* clearRiht => clear:rigth*===============================================================================*/.clearfix:before, .clearfix:after { content: ""; display: table; }.clearfix:after { clear: both; overflow:hidden;}.clearfix { zoom: 1; }

960網(wǎng)格自適應(yīng)布局

前面展示了四種960網(wǎng)格的固定布局，接下來我們一起來看看另外四種自適應(yīng)的布局效果，在盾自適應(yīng)布局之前，有一點先需要提醒大家，最好在你的body中加上

body {min-width: 960px}

具體加上他的好處，大家不用我說都知道的，下面我們來看代碼吧：

/*===========================================================================================* Variable Grid System (Fluid Version).* Learn more ~ http://www.spry-soft.com/grids/* Based on 960 Grid System - http://960.gs/ & 960 Fluid - http://www.designinfluences.com/* Licensed under GPL and MIT.*==========================================================================================*//*=========================================================================*Container: width=960px;*Html Markup* <div class="containerFluid12 clearfix">* <div class="grid4">4</div>* <div class="grid8">8</div>* </div>*=========================================================================*/ body {min-width: 960px;}.containerFluid12,.containerFluid16,.containerFluid24,.containerFluid32 {width: 92%;margin-left: 4%;margin-right: 4%;} /*==========================================================================*container12: *Column width= 60px *Number of columns= 12px *Gutter width= 20px *Content width=940px *Full width=960px*=========================================================================*/.containerFluid12 .grid1,.containerFluid12 .grid2,.containerFluid12 .grid3,.containerFluid12 .grid4,.containerFluid12 .grid5,.containerFluid12 .grid6,.containerFluid12 .grid7,.containerFluid12 .grid8,.containerFluid12 .grid9,.containerFluid12 .grid10,.containerFluid12 .grid11,.containerFluid12 .grid12 {display:inline;float: left;position: relative;margin-left: 1%;margin-right: 1%;margin-left: 0.92%\9;margin-right: 0.92%\9;_margin-left: 0.8%;_margin-right: 0.8%;} .containerFluid12 .grid1 {width:6.333%;}.containerFluid12 .grid2 {width:14.667%;}.containerFluid12 .grid3 {width:23.0%;}.containerFluid12 .grid4 {width:31.333%;}.containerFluid12 .grid5 {width:39.667%;}.containerFluid12 .grid6 {width:48.0%;}.containerFluid12 .grid7 {width:56.333%;}.containerFluid12 .grid8 {width:64.667%;}.containerFluid12 .grid9 {width:73.0%;}.containerFluid12 .grid10 {width:81.333%;}.containerFluid12 .grid11 {width:89.667%;}.containerFluid12 .grid12 {width:98.0%;} /*==========================================================================*container16: *Column width= 40px *Number of columns= 16px *Gutter width= 20px *Content width=940px *Full width=960px*=========================================================================*/.containerFluid16 .grid1,.containerFluid16 .grid2,.containerFluid16 .grid3,.containerFluid16 .grid4,.containerFluid16 .grid5,.containerFluid16 .grid6,.containerFluid16 .grid7,.containerFluid16 .grid8,.containerFluid16 .grid9,.containerFluid16 .grid10,.containerFluid16 .grid11,.containerFluid16 .grid12,.containerFluid16 .grid13,.containerFluid16 .grid14,.containerFluid16 .grid15,.containerFluid16 .grid16,.containerFluid16 .grid-one-third,.containerFluid16 .grid-two-thirds {display:inline;float: left;position: relative;margin-left: 1%;margin-right: 1%;margin-left: 0.92%\9;margin-right: 0.92%\9;_margin-left: 0.8%;_margin-right: 0.8%;} .containerFluid16 .grid1 {width:4.25%;}.containerFluid16 .grid2 {width:10.5%;}.containerFluid16 .grid3 {width:16.75%;}.containerFluid16 .grid4 {width:23.0%;}.containerFluid16 .grid-one-third {width: 31.333%; }.containerFluid16 .grid-two-thirds {width: 64.667%;}.containerFluid16 .grid5 {width:29.25%;}.containerFluid16 .grid6 {width:35.5%;}.containerFluid16 .grid7 {width:41.75%;}.containerFluid16 .grid8 {width:48.0%;}.containerFluid16 .grid9 {width:54.25%;}.containerFluid16 .grid10 {width:60.5%;}.containerFluid16 .grid11 {width:66.75%;}.containerFluid16 .grid12 {width:73.0%;}.containerFluid16 .grid13 {width:79.25%;}.containerFluid16 .grid14 {width:85.5%;}.containerFluid16 .grid15 {width:91.75%;}.containerFluid16 .grid16 {width:98.0%;}/*==========================================================================*container24: *Column width= 30px *Number of columns= 24px *Gutter width= 10px *Content width=950px *Full width=960px*=========================================================================*/.containerFluid24 .grid1,.containerFluid24 .grid2,.containerFluid24 .grid3,.containerFluid24 .grid4,.containerFluid24 .grid5,.containerFluid24 .grid6,.containerFluid24 .grid7,.containerFluid24 .grid8,.containerFluid24 .grid9,.containerFluid24 .grid10,.containerFluid24 .grid11,.containerFluid24 .grid12,.containerFluid24 .grid13,.containerFluid24 .grid14,.containerFluid24 .grid15,.containerFluid24 .grid16,.containerFluid24 .grid17,.containerFluid24 .grid18,.containerFluid24 .grid19,.containerFluid24 .grid20,.containerFluid24 .grid21,.containerFluid24 .grid22,.containerFluid24 .grid23,.containerFluid24 .grid24 {display:inline;float: left;position: relative;margin-left: 1%;margin-right: 1%;margin-left: 0.92%\9;margin-right: 0.92%\9;_margin-left: 0.8%;_margin-right: 0.8%;} .containerFluid24 .grid1 {width:2.167%;}.containerFluid24 .grid2 {width:6.333%;}.containerFluid24 .grid3 {width:10.5%;}.containerFluid24 .grid4 {width:14.667%;}.containerFluid24 .grid5 {width:18.833%;}.containerFluid24 .grid6 {width:23.0%;}.containerFluid24 .grid7 {width:27.167%;}.containerFluid24 .grid8 {width:31.333%;}.containerFluid24 .grid9 {width:35.5%;}.containerFluid24 .grid10 {width:39.667%;}.containerFluid24 .grid11 {width:43.833%;}.containerFluid24 .grid12 {width:48.0%;}.containerFluid24 .grid13 {width:52.167%;}.containerFluid24 .grid14 {width:56.333%;}.containerFluid24 .grid15 {width:60.5%;}.containerFluid24 .grid16 {width:64.667%;}.containerFluid24 .grid17 {width:68.833%;}.containerFluid24 .grid18 {width:73.0%;}.containerFluid24 .grid19 {width:77.167%;}.containerFluid24 .grid20 {width:81.333%;}.containerFluid24 .grid21 {width:85.5%;}.containerFluid24 .grid22 {width:89.667%;}.containerFluid24 .grid23 {width:93.833%;}.containerFluid24 .grid24 {width:98.0%;}/*==========================================================================*container32: *Column width= 20px *Number of columns= 32px *Gutter width= 10px *Content width=950px *Full width=960px*=========================================================================*/.containerFluid32 .grid1,.containerFluid32 .grid2,.containerFluid32 .grid3,.containerFluid32 .grid4,.containerFluid32 .grid5,.containerFluid32 .grid6,.containerFluid32 .grid7,.containerFluid32 .grid8,.containerFluid32 .grid9,.containerFluid32 .grid10,.containerFluid32 .grid11,.containerFluid32 .grid12,.containerFluid32 .grid13,.containerFluid32 .grid14,.containerFluid32 .grid15,.containerFluid32 .grid16,.containerFluid32 .grid17,.containerFluid32 .grid18,.containerFluid32 .grid19,.containerFluid32 .grid20,.containerFluid32 .grid21,.containerFluid32 .grid22,.containerFluid32 .grid23,.containerFluid32 .grid24,.containerFluid32 .grid25,.containerFluid32 .grid26,.containerFluid32 .grid27,.containerFluid32 .grid28,.containerFluid32 .grid29,.containerFluid32 .grid30,.containerFluid32 .grid31,.containerFluid32 .grid32,.containerFluid32 .grid-one-third,.containerFluid32 .grid-two-thirds {display:inline;float: left;position: relative;margin-left: 1%;margin-right: 1%;margin-left: 0.92%\9;margin-right: 0.92%\9;_margin-left: 0.8%;_margin-right: 0.8%;} .containerFluid32 .grid1 {width:1.125%;}.containerFluid32 .grid2 {width:4.25%;}.containerFluid32 .grid3 {width:7.375%;}.containerFluid32 .grid4 {width:10.5%;}.containerFluid32 .grid5 {width:13.625%;}.containerFluid32 .grid6 {width:16.75%;}.containerFluid32 .grid7 {width:19.875%;}.containerFluid32 .grid8 {width:23.0%;}.containerFluid32 .grid9 {width:26.125%;}.containerFluid32 .grid10 {width:29.25%;}.containerFluid32 .grid11 {width:32.375%;}.containerFluid32 .grid12 {width:35.5%;}.containerFluid32 .grid-one-third {width: 31.333%;}.containerFluid32 .grid-two-thirds {width: 64.667%;}.containerFluid32 .grid13 {width:38.625%;}.containerFluid32 .grid14 {width:41.75%;}.containerFluid32 .grid15 {width:44.875%;}.containerFluid32 .grid16 {width:48.0%;}.containerFluid32 .grid17 {width:51.125%;}.containerFluid32 .grid18 {width:54.25%;}.containerFluid32 .grid19 {width:57.375%;}.containerFluid32 .grid20 {width:60.5%;}.containerFluid32 .grid21 {width:63.625%;}.containerFluid32 .grid22 {width:66.75%;}.containerFluid32 .grid23 {width:69.875%;}.containerFluid32 .grid24 {width:73.0%;}.containerFluid32 .grid25 {width:76.125%;}.containerFluid32 .grid26 {width:79.25%;}.containerFluid32 .grid27 {width:82.375%;}.containerFluid32 .grid28 {width:85.5%;}.containerFluid32 .grid29 {width:88.625%;}.containerFluid32 .grid30 {width:91.75%;}.containerFluid32 .grid31 {width:94.875%;}.containerFluid32 .grid32 {width:98.0%;}

具體效果請查看DEMO效果。

那么到止為止我們總共見證了八種網(wǎng)格布局，不知道大家理解清楚沒有，要是沒有的話不怕，我們可以借助這個工具來幫大家實現(xiàn)：

當(dāng)然，這只是960gs，如果大家需要1140px呢？720px呢？其實只要你明白上面的原理，借助這樣的工具，你將能制作出你自己想要的網(wǎng)格布局。心動了嗎？要是心動了就動手試試吧。希望大家喜歡這個網(wǎng)格系統(tǒng)，如果有更好的建議，歡迎給我留言，與大家共享。

總結(jié)

以上是生活随笔為你收集整理的CSS布局——960gs的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。