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

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

http://960.gs/

1、什麼是CSS框架？

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

    * grid.css 表格佈局

    * layout.css 佈局

    * form.css 表單

    * general.css CSS常規設置

2、CSS框架的種類：

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

    YUI Grids CSS            Blueprint               YAML CSS Framework            CleverCSS

       等等。。。。。。

3、960Grid

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

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

        這，就是960Grid。

        官網：http://960.gs/

4、法律問題

    960網格系統的文件都是免費的，MIT / GPL開源許可協議。大家可以放心大膽使用。

5、如何使用960Grid框架？

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

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

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

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

<div class="container_12">
</div>

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

（3）在這個DIV大容器裏開始佈局網頁，首先添加一個LOGO欄，這個欄橫向跨越整個960寬度：

<div class="container_12">
    <div class="grid_12"></div>
</div>

    此時，注意了，在12列的container中，使用了一個12列的grid，下劃線後數字就是該DIV所佔的列數。當然爲了佈局方便，我們一定會加入更多的class或id的，最後如下：

<div class="container_12">
    <div class="grid_12
logo"></div>
</div>

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

（4）設置導航欄

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

<div class="container_12">
    <div class="grid_12"></div>
    <div class="clear"></div>
</div>

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

<div class="container_12">
    <div class="grid_12
logo"></div>
    <div class="clear"></div>
    <div class="grid_12
nav">
        <ul>...</ul>
    </div>
    <div class="clear"></div>
</div>

    添加樣式後，網頁變爲這樣：

（5）添加PhotoSlide的位置

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

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

    現在把代碼寫好：

<div class="container_12">
    <div class="grid_12
logo"></div>
    <div class="clear"></div>
    <div class="grid_12
nav">
        <ul>...</ul>
    </div>
    <div class="clear"></div>

    <div class="grid_7
topslider"></div>
    <div class="grid_5
topslider"></div>
    <div class="clear"></div>
</div>

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

（6）完成接下來的代碼

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

    加入很多代碼後：

<div class="container_12">
    <div class="grid_12
logo"></div>
    <div class="clear"></div>
    <div class="grid_12
nav">
        <ul>...</ul>
    </div>
    <div class="clear"></div>

    <div class="grid_7
topslider"></div>
    <div class="grid_5
topslider"></div>
    <div class="clear"></div>
    <div class="grid_12
spacer"></div>
    <div class="clear"></div>

    <div class="grid_3"></div>
    <div class="grid_3"></div>
    <div class="grid_3"></div>
    <div class="grid_3"></div>

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

    <div class="grid_12
spacer"></div>
    <div class="clear"></div>

    <div class="grid_4
footer"></div>
    <div class="grid_4
footer"></div>
    <div class="grid_4
footer"></div>
</div>

    然後添加內容，設置CSS，就是這個頁面了：

    到目前爲止，能明白960Grid原理就達到目的。接下來的是關於這個框架的高級內容部分。

高級部分：

（1）alpha和omega參數

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

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

（2）prefix和suffix參數

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

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

    多簡單。

（3）push和pull參數

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

    960Grid提供push和pull參數，push是推，pull是拉。關鍵是在什麼位置推拉，就是說那裏纔是動作的起點？我們瀏覽網頁時幾乎都是自左向右看，所以該動作也以左側爲起點，現在想象你就站在最左邊。push_i就是把一個塊向右推移i個列寬，pull_i就是把這個塊向左拉i個列寬。

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

（4）clear參數

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

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

    如果遇到這種情況：

<div class="grid_4"></div>
<div class="grid_5"></div>

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

<div class="grid_3"></div>

    原本橫向佔滿12列的4+5+3，中間夾個clear。會發生什麼事呢？grid_3這個塊就會從下一個橫行最左邊出現。所以clear就是一個回車，相當於

塊的<br />。

    好了總結下：

    A、margin參數是alpha和omega；

    B、padding參數是prefix和suffix；

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

    D、clear是塊回車換行。

    就寫到這裏吧。五嶽之巔原創，轉載請註明出處。

轉自：http://blog.chinaunix.net/uid-22414998-id-2878529.html