CSS框架960Grid從入門到精通一步登天

五岳之巔

閑言少敘，廢話不說，直入正題：

1、什么是CSS框架？

    CSS框架是一種你能夠使用在你的web項目中概念上的結構，是別人已經(jīng)寫完的，而且很完善的CSS定義集合。CSS框架一般是CSS文件的集合，包括基本風格的字體排版，表單樣式，表格布局等等，比如：

    * grid.css 表格布局

    * layout.css 布局

    * form.css 表單

    * general.css CSS常規(guī)設置

2、CSS框架的種類：

    CSS框架很多，可以說太多了，最近幾年像潮水般涌出。只是國內(nèi)用CSS框架的不多，倒是PHP框架和Spring框架用的更多些。比較著名的CSS框架如下，不同的框架完成的任務不一定完全一樣，每個框架都有自己的特色：

    YUI Grids CSS            Blueprint               YAML CSS Framework            CleverCSS

       等等。。。。。。

3、960Grid

        由于電腦顯示器有方屏、寬屏，寬屏又分16:9和16:10。分辨率更是多種多樣，這么多不同模式下得用戶如何能看到外觀整齊、一致的網(wǎng)站呢？人們發(fā)現(xiàn)一個奇妙的事情：960px的寬度是Very Good！無論什么屏，那種分辨率都通吃。

        現(xiàn)在有人專門開發(fā)了一組網(wǎng)站架構CSS規(guī)則，只要遵守這些簡單的規(guī)則（其實就是class類），你就能快速設計出960px寬度的網(wǎng)頁結構來。

        這，就是960Grid。

        官網(wǎng)：http://960.gs/

4、法律問題

    960網(wǎng)格系統(tǒng)的文件都是免費的，MIT / GPL開源許可協(xié)議。大家可以放心大膽使用。

5、如何使用960Grid框架？

（1）在html文件中引入相關的外部CSS文件：

1. <link rel="stylesheet" href="css/reset.css" />
   
2. <link rel="stylesheet" href="css/text.css" />
   
3. <link rel="stylesheet" href="css/960.css" />

      在這必須解釋一下，960.css為主要排版樣式，缺它肯定不行。還有兩個css文件：reset.css和text.css，它們的主要作用是為了消除瀏覽器間顯示差異準備的，前者消除了html標簽在各瀏覽器間的差異，而后者則主要針對的是字體。

（2）定義一個DIV大容器，放下整個頁面：

1. <div class="container_12">
   
2. </div>

    這個DIV塊一定要設定12列還是16列，其實不管12列還是16列寬度都是960px，只不過看你需不需要更細分的列了。

（3）在這個DIV大容器里開始布局網(wǎng)頁，首先添加一個LOGO欄，這個欄橫向跨越整個960寬度：

1. <div class="container_12">
   
2.     <div class="grid_12"></div>
   
3. </div>

    此時，注意了，在12列的container中，使用了一個12列的grid，下劃線后數(shù)字就是該DIV所占的列數(shù)。當然為了布局方便，我們一定會加入更多的class或id的，最后如下：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3. </div>

    設置好.logo的CSS的高和背景圖片后，能看到如下圖所示的界面：

（4）設置導航欄

    剛才那個logo塊其實已經(jīng)完工了，但為了清除它對身后的CSS設置影響，建議在每個橫向DIV大塊做完之后，都加上class="clear"進行收尾。所以剛才的代碼現(xiàn)在更改如下：

1. <div class="container_12">
   
2.     <div class="grid_12"></div>
   
3.     <div class="clear"></div>
   
4. </div>

    然后再加入導航欄的DIV塊，和LOGO一樣，也是一個橫向大塊，設置后代碼如下：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3.     <div class="clear"></div>
   
4.     <div class="grid_12 nav">
5.         <ul>...</ul>
6.     </div>
   
7.     <div class="clear"></div>
8. </div>

    添加樣式后，網(wǎng)頁變?yōu)檫@樣：

（5）添加PhotoSlide的位置

    一般網(wǎng)站為了漂亮和醒目，會在nav下加入photoslide，有的是js的，有的是flash的，但無論哪種都能把網(wǎng)站襯托起來。當然例子中就不真的放photoslide了。現(xiàn)在要把橫行分為兩個部分：left和right，left寫文字，right放個圖片提提神。

    按原案例樣子，left會占據(jù)7列的寬度，right將占據(jù)5列的寬度，7+5=12列！所以一個class用grid_7，另一個用gird_5。然后直接在塊后加上clear類。由于這兩個塊高度一致，邊框也一致，所以都加入一個topslider類設置它們的共同特征。

    現(xiàn)在把代碼寫好：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3.     <div class="clear"></div>
   
4.     <div class="grid_12 nav">
   
5.         <ul>...</ul>
   
6.     </div>
   
7.     <div class="clear"></div>
8. 
   
9.     <div class="grid_7 topslider"></div>
   
10.     <div class="grid_5 topslider"></div>
    
11.     <div class="clear"></div>
    
12. </div>

    填入其它Html標記和各種素材，完成后，如下圖所示：

（6）完成接下來的代碼

    用兩段grid_12的名為class="spacer"的div夾住四篇文章部分，四篇文章分別使用四個grid_3來完成。為什么是四個grid_3呢？橫向12列，4篇等寬文章，每篇12/4=3！如果到現(xiàn)在你還有這個疑問，說明你其實沒弄明白960grid的原理。建議回到頁首再看下來。

    加入很多代碼后：

1. <div class="container_12">
   
2.     <div class="grid_12 logo"></div>
   
3.     <div class="clear"></div>
   
4.     <div class="grid_12 nav">
   
5.         <ul>...</ul>
   
6.     </div>
   
7.     <div class="clear"></div>
8. 
   
9.     <div class="grid_7 topslider"></div>
   
10.     <div class="grid_5 topslider"></div>
    
11.     <div class="clear"></div>
    
12.     <div class="grid_12 spacer"></div>
    
13.     <div class="clear"></div>
    
14.   
    
15.     <div class="grid_3"></div>
    
16.     <div class="grid_3"></div>
    
17.     <div class="grid_3"></div>
    
18.     <div class="grid_3"></div>
    
19.   
    
20.     <div class="clear"></div>
    
21.   
    
22.     <div class="grid_12 spacer"></div>
    
23.     <div class="clear"></div>
    
24.   
    
25.     <div class="grid_4 footer"></div> 
26.     <div class="grid_4 footer"></div>
    
27.     <div class="grid_4 footer"></div>
    
28. </div>

    然后添加內(nèi)容，設置CSS，就是這個頁面了：

    到目前為止，能明白960Grid原理就達到目的。接下來的是關于這個框架的高級內(nèi)容部分。

高級部分：

（1）alpha和omega參數(shù)

    默認情況下，左右margin都是10px，則列間距為20px，但最左邊的容器不需要左margin，最右邊的容器不需要右margin，所以要改成這樣，用alpha出去左margin，omega除去右margin：

1. <div class="container_12″>
   
2.     <div class="grid_2 alpha">左側導航欄</div>
   
3.     <div class="grid_8″>主版塊</div>
4.     <div class="grid_2 omega">右側廣告欄</div>
   
5. </div>

（2）prefix和suffix參數(shù)

    如同上面那兩個margin快捷參數(shù)一樣，不必非得單獨為某個div單獨命名id或class，960Grid已經(jīng)提供了prefix和suffix來處理padding。左側補白（padding-left）是prefix_i，右側的是suffix_i。i的值就是補白所占的列數(shù)，比如你想左側加2列補白，則可以使用：

1. <div class="grid_5 prefix_2"></div>

    多簡單。

（3）push和pull參數(shù)

    最絕的還是這兩個參數(shù)，一般人用的不多。因為大家都滿足自己的網(wǎng)頁寬度是960px了，如果現(xiàn)在真想把其中一個涉及到圖片或廣告的div做到1024px寬，怎么辦？其實很好解決，一個div做reletive，它的子div的為absolue并且left為負值就可以，但這種CSS有點麻煩。

    960Grid提供push和pull參數(shù)，push是推，pull是拉。關鍵是在什么位置推拉，就是說那里才是動作的起點？我們?yōu)g覽網(wǎng)頁時幾乎都是自左向右看，所以該動作也以左側為起點，現(xiàn)在想象你就站在最左邊。push_i就是把一個塊向右推移i個列寬，pull_i就是把這個塊向左拉i個列寬。

    push和pull動作對其他兄弟塊沒有影響�？梢灾苯油瞥�960px去它就在整個網(wǎng)頁右邊獨單顯示了，也可以pull出來，就在左邊單獨顯示了。有點像sohu側邊廣告的感覺。上個圖，直觀感受下吧，但sohu可不是用push和pull做出來的，我的意思是和sohu的效果一樣。

（4）clear參數(shù)

    class="clear"，什么時候用呢。當你想換行的時候就使用它，即使一個橫行只有grid_5和grid_4，就是說沒有占滿12列，也可以在其后增加一個讓其后的任何內(nèi)容都從下一行行首開始：

1. <div class="clear"></div>

    如果遇到這種情況：

1. <div class="grid_4"></div>
   
2. <div class="grid_5"></div>
   
3. 
   
4. <div class="clear"></div>
   
5. 
   
6. <div class="grid_3"></div>

    原本橫向占滿12列的4+5+3，中間夾個clear。會發(fā)生什么事呢？grid_3這個塊就會從下一個橫行最左邊出現(xiàn)。所以clear就是一個回車，相當于

塊的<br />。

    好了總結下：

    A、margin參數(shù)是alpha和omega；

    B、padding參數(shù)是prefix和suffix；

    C、脫離文檔流移動參數(shù)是push和pull；

    D、clear是塊回車換行。

    就寫到這里吧。五岳之巔原創(chuàng)，轉載請注明出處。