CSS框架 ：960 Grid System ?官網：http://960.gs/
?什么是框架？框架是一種你能夠使用在你的web項目中概念上的結構。CSS框架一般是CSS文件的集合，包括基本風格的字體排版，表單樣式，表格布局等等，比如：
??? * typography.css 字體排版規則
??? * grid.css 表格布局
??? * layout.css 布局
??? * form.css 表單
??? * general.css CSS常規設置
下面是一些不錯的CSS框架，推薦。
Blueprint CSS
Blueprint是一個CSS框架，它的目標是減少你的CSS開發時間。它提供給你強大的CSS基礎來創建你的項目，包括易于使用的grid，有效的字體排版，以及可打印的stylesheet .
960 Grid System
?一、960的奧妙
????? 從數學著手： 960可以分解為2的6次方乘以3和5, 這使得960可以分割成以下寬度的整數倍：
2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40,48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480
共26種（26 = 7 * 2 * 2 – 2, 減去2是去掉1和960自身），我們標記為：
N(960) = N(2^6 * 3 * 5) = 26
根據上面的算法，可以得到：
N(360) = N(2^3 * 3^2 * 5) = 22N(480) = N(2^5 * 3 * 5) = 22N(720) = N(2^4 * 3^2 * 5) = 28N(750) = N(2 * 3 * 5^3) = 14N(800) = N(2^5 * 5^2) = 16N(960) = N(2^6 * 3 * 5) = 26N(1000) = N(2^3 * 5^3) = 14N(1024) = N(2^10) = 9N(1440) = N(2^6 * 3^2 * 5) = 34N(1920) = N(2^7 * 3 * 5) = 30
從上述算法我們可以得出以下結論：
要使得N(width)最大，width的取值有兩個系列： A系列： …, 320, 720, 1440, … B系列： …, 480, 960, 1920, … N越大，可組合的寬度值就越多。
????? 目前絕大多數顯示器都支持 1024 x 768 及其以上分辨率，而960恰好是1024 x 768 分辨率下最靈活也是最合適的尺寸，這些條件決定了960成了目前設計中最完美的尺寸。（PS：此部分內容大多摘自：960 Grid System 研究）
二、960網格系統簡介
本質：
960 Grid System?是一套基于寬度為 960px CSS 框架，它為網頁布局提供了通用的尺寸設置，它提供了兩種不同的尺寸布局：12列和16列，它們可以獨立使用，也可以一起使用。
尺寸：
12列的布局，將總寬分成12份，每份的寬度是60px，而16列的布局分成16份，每份的寬度是40px，每部分左右邊距都是10px，從而每列產生20px的空隙。
目的：
該系統以快速原型開發為出發點，但同時也能很好地集成到生產環境中去。它同時提供了打印布局、設計布局和一個能提供一致尺寸的 CSS 文件。
?960 Grid System是一個非常棒的布局輔助設計系統，以960PX為基準寬度提供了12列和16列兩種布局模式（PS：目前官方已經提供了24列的布局模式，相信作者以后還會提供更多的布局模式）。
??????1：alpha與omega
????? 960 Grid System的布局寬度為960PX，但由于每列左右均由10PX的margin（外補丁），因此內容寬度實際為940px。
/*alpha：用于清除左邊10px的marginomega：用于清除右邊10px的margin*/
????? PS：從作者取alpha與omega這兩個名字可以想象一下或許作者很熱愛希臘文化。alpha（α）在希臘字母表里，它是第一個字母，讀作“阿爾法”（阿拉法），代表開始；omega（γ）在希臘字母表里，它是最后一個字母，讀作“歐美噶”（俄梅嘎），代表終了。
?????2：prefix_XX與suffix_xx
/*用于在每個單元網格的前面或后面添加空白的列（欄）*//*用法：<div class="prefix_15 grid_1">IT北瓜</div>*/
??????3：clear與hr
/*用于清除層的浮動*//*用法：<div class="clear"></div>*//*但假如你查看過官網主頁的源代碼你會發現，作者用的是<hr />*//*用法：可參考官網主頁的源代碼<hr />*/
?????4：push_xx與pull_xx
/*這是2009-06-29更新新增的類，用于重新定制布局順序*//*用法：引用官網主頁源代碼*/<h1 class="grid_4 push_4"> 960 Grid System</h1><!-- end .grid_4.push_4 --><p id="description" class="grid_4 pull_4"> <a href="files/960_download.zip">Download</a> ← Templates for <a href="http://www.adobe.com/products/fireworks/">Fireworks</a>, <a href="http://www.adobe.com/products/indesign/">InDesign</a>, <a href="http://www.inkscape.org/">Inkscape</a>, <a href="http://www.adobe.com/products/illustrator/">Illustrator</a>, <a href="http://www.omnigroup.com/applications/omnigraffle/">OmniGraffle</a>, <a href="http://www.adobe.com/products/photoshop/">Photoshop</a>, <a href="http://office.microsoft.com/en-us/visio/default.aspx">Visio</a>, <a href="http://www.microsoft.com/expression/products/Design_Overview.aspx">Expression Design</a>. Sketch PDF. CSS code. The 960.css file is 5.4 KB. View <a href="http://bitbucket.org/nathansmith/960-grid-system/">repository</a>.</p><!-- end #description.grid_4.pull_4 --><hr /><div class="grid_6"> <p> <a href="http://www.spry-soft.com/grids/"><img src="img/tool_css.gif" alt="Custom CSS generator" width="460" height="60" /></a> </p></div><!-- end .grid_6 --><div class="grid_6"> <p> <a href="http://gridder.andreehansson.se/"><img src="img/tool_bookmark.gif" alt="Grid overlay bookmark" width="460" height="60" /></a> </p></div><!-- end .grid_6 -->
??????5：container_xx與grid_xx
/*這是該系統最基本最重要的用法，其中xx代表列數*//*用法：*/<div class="container_12"> <div id="sidebar" class="grid_2">sidebar</div> <div id="content" class="grid_10"> <div id="main_content" class="grid_6 alpha">main content</div> <div id="photos" class="grid_2">photo’s</div> <div id="advertisements" class="grid_2 omega">advertisement</div> <div class="clear"></div> </div> <div class="clear"></div></div>
以上轉載自IT北瓜
鏈接地址:?http://imleeo.com/special-series/960-grid-system-introduction.html
首先，你需要學習關于”如何讓框架工作”。你可以通過自己的嘗試來學習，不過我仍然會在這里為大家進行講解，那就開始吧。
不要編輯960.css
先說一點需要注意的:不要編輯960.css文件，如果你修改了它，那么你今后將無法更新這個框架。
讀取網格
在我們使用外部文件中的CSS代碼之前，首先要在我們的HTML文件中調用它們。像這樣調用:
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />
當我們調用好它們以后，我們要調用自己的CSS文件了。例如，你也許會將你的CSS文件命名為style.css或site.css或者其它什么的。這樣調用它:
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/style.css” />
Containers(容器)
在960框架中，你可以選擇兩種類名為.container_12 和 .container_16的容器。這兩種容器都是960px的寬度(這就是為什么叫做960 grid),但他們的不同之處是它們包含不同數量的列。顧名思義，.container_12的容器被分為12列，而 .container_16被分為16列。這兩種960px寬的容器都是水平居中的。
Grids (網格)/ Columns(列)
你可以選擇很多種不同的列寬組合，不過在這兩種容器中是有所不同的。你可以通過打開960.css來了解這些寬度，但這對于設計一個網站并沒有什么必要。在這里暴風彬彬將一個很有用的技巧讓你使用框架更加容易。
例如:如果你想在你的容器中僅使用兩列(分別是主內容區/側邊欄)，你可以這樣做:
<div class=”container_12″>
<div class=”grid_4″>sidebar</div>
<div class=”grid_8″>main content</div>
</div>
看到上面的代碼你也許已經明白，不過我還是要講一下。也就是說你在container_12這個容器中使用了grid_4和grid_8兩列，4+8恰好等于12！明白了嗎？使用網格系統的好處之一就是你不用去計算沒列的寬度到底是多少，省去了很多運算。
下面讓我們看看如何編寫四列布局:
<div class=”container_12″>
<div class=”grid_2″>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2″>advertisement</div>
</div>
正如你看到的，這個系統工作得很好。如果你嘗試使用你的瀏覽器讀取他的話，你會發現有一些不對勁的地方。不過不要緊，那正是我們下一個話題要討論的。
Margins
默認情況下，每列之間都會存在一些margin。每個grid_(這里插入數值)類都有10px的左margin和右margin。也就是說兩列之間的margin值是20px。
20px的margin能讓布局保持應有的留白并看上去更平滑，這也是我喜歡960 grid System的原因之一。
在上面的例子中，我們將它使用瀏覽器讀取時出現了一些問題，現在我們來修復它。
問題在于每個列都包含左margin和右margin，但是最左面的列不應該有左margin，最右面的列不應該有右margin。(夠羅嗦！)下面是解決方法:
<div class=”container_12″>
<div class=”grid_2 alpha”>sidebar</div>
<div class=”grid_6″>main content</div>
<div class=”grid_2″>photo’s</div>
<div class=”grid_2 omega”>advertisement</div>
</div>
你僅需添加alpha類來去除左margin，添加omega類去除右margin。好了，現在我們的布局已經可以完美在瀏覽器中對齊了。(是的，包括IE6)
Styling(添加樣式)
事實上，你已經掌握了如何使用960框架創建基本的網格布局了。不過你也許還想為自己的布局添加一些樣式。
<div class=”container_12″>
<div id=”sidebar” class=”grid_2 alpha”>sidebar</div>
<div id=”content” class=”grid_6″>main content</div>
<div id=”photos” class=”grid_2″>photo’s</div>
<div id=”advertisements” class=”grid_2 omega”>advertisement</div>
</div>
由于CSS使用優先級的形式來覺得如何解釋樣式，而id要比class的優先級高。這樣我們就可以在我們的獨立CSS文件中以id選擇符創建個性化的樣式了。如果湊巧有的樣式屬性與960相同但值又不同，瀏覽器會優先選擇你的CSS文件中的樣式。當然，如果您感興趣，也可以看看上面的實例添加樣式后的實際效果。
英文原文:960 CSS Framework – Learn the Basics
本框架代碼適用于所有由yahoo評為A級（A-grade）的瀏覽器，yahoo對瀏覽器的評定情況如下圖所示。?
