CSS布局——960gs
生活随笔
收集整理的這篇文章主要介紹了
CSS布局——960gs
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
出處：W3CPLUS??
轉自Airen的博客
說起CSS的布局，有太多了，現在常見的有固定布局、流體布局、彈性布局。在百度上搜了下960網格布局的方法。發現Airen的博客有具體介紹960布局的情況，就轉載了下。
960gs使用其實很方便，大家只要到其官網下載整個網格系統的代碼，然后應用進行就OK了。聽起來很方便，但沒有接觸的同學還是感覺有點難一樣，那么要是你對此很感興趣，大家就跟我一起看看我是如何使用960gs吧。網絡上下載下來的960網絡系統，是一個完整的系統，但我個人認為系統中有很多代碼是我們沒有用到的，完全可以不需要那部分，我們需要的只是其中的格子系，用這些格子系來幫助我們實現各種不同的布局，下面我就給大家介紹一下我取用的部分網格。
首先我將960網格分成兩大類，其中一類是“固定尺寸”，而另一大類就是“流體尺寸”，也就是大家所說的自適應布局；接著我在將其中的每大類分成四小類，它們就是：grid12、grid16、grid24和grid32。這四小類的意思就是——我將一個整體布局容器分成了12份（或者說分成了16份或24份或32份）。大家可以先來看看下圖所示：
這樣一來，我們在960Grids中就有幾個概念性的詞語，而且這幾個詞語大家必須了解清楚他們的含義，這將對你使用960gs會有極大的幫助：
下面大家一起來看一個“container16”的示意圖：
通過上面的名詞大家對“960gs”應該有了一定的了解，下面我們來看具體的應用。
HTML Markup
首先，我們使用這個960網格系統，我們也需要一個HTML的結構，下面我們先來看一下其結構：
<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網格系統中的12列那種，換句話說，就是把“div.container12”這個容器分成了12份；而其中“div.grid1”就是其中的每一份，我們放置了12個在其中，這樣剛好等于容器“div.container12”所分的份數。其實我也也還可以這樣使用的：
<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”，但他們的總數都是等于容器“div.container12”所分的份數。從上面的兩個HTML Markup告訴我們這樣一個原理：容器內所有列數之和要等于容器所分的份數
CSS Code
有了結構后，我們需要的就是定義這個網格系統的樣式，定義樣式之前我們需要知道上面我們所講的幾個參數的值，我先拿“960gs”的“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;}到些我們就完成了一個簡單的960gs中的12grids布局。上面展示的代碼中，我們完全可以把“container12”換成“container”，因為在我們平時制作中，我們可以完全的確定好需要采用的是“container12”還是“container16”或者別的。我在這里只是為了更好的說明問題。前面我也提到過，我們有兩大類，各四小類的網格布局，下面我附上他們的代碼，和相關的demo給大家參考：
960網格固定布局
先給大家展示的是960網格的四種固定布局：
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;}請看對應的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網格自適應布局
前面展示了四種960網格的固定布局，接下來我們一起來看看另外四種自適應的布局效果，在盾自適應布局之前，有一點先需要提醒大家，最好在你的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效果。
那么到止為止我們總共見證了八種網格布局，不知道大家理解清楚沒有，要是沒有的話不怕，我們可以借助這個工具來幫大家實現：
當然，這只是960gs，如果大家需要1140px呢？720px呢？其實只要你明白上面的原理，借助這樣的工具，你將能制作出你自己想要的網格布局。心動了嗎？要是心動了就動手試試吧。希望大家喜歡這個網格系統，如果有更好的建議，歡迎給我留言，與大家共享。
總結
以上是生活随笔為你收集整理的CSS布局——960gs的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sda、sdb、sdc、sda1、sda
- 下一篇： HTML---基础篇