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

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

一、什麼是CSS框架？

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

    * grid.css 表格佈局

    * layout.css 佈局

    * form.css 表單

    * general.css CSS常規設置

 

二、CSS框架的種類：

    CSS框架不少，能夠說太多了，最近幾年像潮水般涌出。只是國內用CSS框架的很少，卻是PHP框架和Spring框架用的更多些。比較著名的CSS框架以下，不一樣的框架完成的任務不必定徹底同樣，每一個框架都有本身的特點：

    YUI Grids CSS            Blueprint               YAML CSS Framework            CleverCSS

       等等。。。。。。

 

三、960Grid

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

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

        這，就是960Grid。

        官網： http://960.gs/

 

四、法律問題

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

 

五、如何使用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">
        
    
      ...
    </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就是一個回車，至關於

塊的
。

 

     好了總結下：

    A、margin參數是alpha和omega；

    B、padding參數是prefix和suffix；

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

    D、clear是塊回車換行。

 

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