<b>閑言少叙，廢話不說，直入正題：</b>
<b>1、什麼是CSS架構？</b>
CSS架構是一種你能夠使用在你的web項目中概念上的結構，是别人已經寫完的，而且很完善的CSS定義集合。CSS架構一般是CSS檔案的集合，包括基本風格的字型排版，表單樣式，表格布局等等，比如：
* grid.css 表格布局
* layout.css 布局
* form.css 表單
* general.css CSS正常設定
<b>2、CSS架構的種類：</b>
CSS架構很多，可以說太多了，最近幾年像潮水般湧出。隻是國内用CSS架構的不多，倒是PHP架構和Spring架構用的更多些。比較著名的CSS架構如下，不同的架構完成的任務不一定完全一樣，每個架構都有自己的特色：
YUI Grids CSS Blueprint YAML CSS Framework CleverCSS
等等。。。。。。
<b>3、960Grid</b>
由于電腦顯示器有方屏、寬屏，寬屏又分16:9和16:10。分辨率更是多種多樣，這麼多不同模式下得使用者如何能看到外觀整齊、一緻的網站呢？人們發現一個奇妙的事情：960px的寬度是Very Good！無論什麼屏，那種分辨率都通吃。
現在有人專門開發了一組網站架構CSS規則，隻要遵守這些簡單的規則（其實就是class類），你就能快速設計出960px寬度的網頁結構來。
這，就是960Grid。
<b>4、法律問題</b>
960網格系統的檔案都是免費的，MIT / GPL開源許可協定。大家可以放心大膽使用。
<b>5、如何使用960Grid架構？</b>
（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="grid_12">/div>
此時，注意了，在12列的container中，使用了一個12列的grid，下劃線後數字就是該DIV所占的列數。當然為了布局友善，我們一定會加入更多的class或id的，最後如下：
div class="grid_12 logo">/div>
設定好.logo的CSS的高和背景圖檔後，能看到如下圖所示的界面：
（4）設定導航欄
剛才那個logo塊其實已經完工了，但為了清除它對身後的CSS設定影響，建議在每個橫向DIV大塊做完之後，都加上class="clear"進行收尾。是以剛才的代碼現在更改如下：
div class="clear">/div>
然後再加入導航欄的DIV塊，和LOGO一樣，也是一個橫向大塊，設定後代碼如下：
div class="grid_12 nav">
...
/div>
div class="clear">/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類設定它們的共同特征。
現在把代碼寫好：
ul>.../ul>
/div>
div class="grid_7 topslider">/div>
div class="grid_5 topslider">/div>
填入其它Html标記和各種素材，完成後，如下圖所示：
<b>（6）完成接下來的代碼</b>
用兩段grid_12的名為class="spacer"的div夾住四篇文章部分，四篇文章分别使用四個grid_3來完成。為什麼是四個grid_3呢？橫向12列，4篇等寬文章，每篇12/4=3！如果到現在你還有這個疑問，說明你其實沒弄明白960grid的原理。建議回到頁首再看下來。
加入很多代碼後：
div class="grid_12 spacer">/div>
div class="grid_3">/div>
div class="grid_4 footer">/div>
div class="grid_4 footer">/div>
然後添加内容，設定CSS，就是這個頁面了：
到目前為止，能明白960Grid原理就達到目的。接下來的是關于這個架構的進階内容部分。
<b>進階部分：</b>
<b>（1）alpha和omega參數</b>
預設情況下，左右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>
<b>（2）prefix和suffix參數</b>
如同上面那兩個margin快捷參數一樣，不必非得單獨為某個div單獨命名id或class，960Grid已經提供了prefix和suffix來處理padding。左側補白（padding-left）是prefix_i，右側的是suffix_i。i的值就是補白所占的列數，比如你想左側加2列補白，則可以使用：
div class="grid_5 prefix_2">/div>
多簡單。
<b>（3）push和pull參數</b>
最絕的還是這兩個參數，一般人用的不多。因為大家都滿足自己的網頁寬度是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的效果一樣。
<b></b>
<b>（4）clear參數</b>
class="clear"，什麼時候用呢。當你想換行的時候就使用它，即使一個橫行隻有grid_5和grid_4，就是說沒有占滿12列，也可以在其後增加一個讓其後的任何内容都從下一行行首開始：
div class="clear">/div>
如果遇到這種情況：
div class="grid_4">/div>
div class="grid_5">/div>
div class="grid_3">/div>
原本橫向占滿12列的4+5+3，中間夾個clear。會發生什麼事呢？grid_3這個塊就會從下一個橫行最左邊出現。是以clear就是一個回車，相當于塊的
。
<b> 好了總結下：</b>
<b> A、margin參數是alpha和omega；</b>
<b> B、padding參數是prefix和suffix；</b>
<b> C、脫離文檔流移動參數是push和pull；</b>
<b> D、clear是塊回車換行。</b>
就寫到這裡吧。五嶽之巅原創，轉載請注明出處。