1.下載地址猛擊這里。

2.入門。

為什么是960px？參考TaobaoUED的網頁柵格系統(tǒng)研究（1）：960的秘密。

源代碼文件結構如下：

2.1 如何使用

要使用 960gs，首先需要到 960gs 官方網站下載樣式文件，然后就可以直接在頁面設計時使用 960.css 中定義的 CSS類(class)即可。

2.2 看看960.css

960.css分為十九個部分。

• 第一部分只有一句，注意不是width而是min-width。

body {

  min-width: 960px;

}

• 第二部分是Containers。

有兩個類.container_12和.container_16

.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

• 第三部分是Grid >> Global。

看起來類數(shù)量很多，其實可以分為三種。

第三部分第一種命名為.grid_i（i=1…16）

{
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

第三部分第二種命名為.push_i和.pull_i（i=1…15）

{
  position: relative;
}

第三部分第三種選擇器為(.container_i .grid_j)（i=[12,16]，j=[0.25i,0.50i,0.75i,i]）。

.container_12 .grid_3,
.container_16 .grid_4 {
  width: 220px;
}
.container_12 .grid_6,
.container_16 .grid_8 {
  width: 460px;
}
.container_12 .grid_9,
.container_16 .grid_12 {
  width: 700px;
}
.container_12 .grid_12,
.container_16 .grid_16 {
  width: 940px;
}

• 第四、五、六部分為Grid >> Children、Grid >> 12 Columns和Grid >> 16 Columns，主要修改的是width（三3、五、六要一起看）

Grid >> Children只有兩個類

.alpha {
  margin-left: 0;
}
.omega {
  margin-right: 0;
}

Grid >> 12 Columns的選擇器為(.container_12 .grid_i)（i=[1,2,4,5,7,8,10,11]，沒有3、6、9、12）

.container_12 .grid_1 {
  width: 60px;
}
.container_12 .grid_2 {
  width: 140px;
}
.container_12 .grid_4 {
  width: 300px;
}
.container_12 .grid_5 {
  width: 380px;
}
.container_12 .grid_7 {
  width: 540px;
}
.container_12 .grid_8 {
  width: 620px;
}
.container_12 .grid_10 {
  width: 780px;
}
.container_12 .grid_11 {
  width: 860px;
}

Grid >> 16 Columns的選擇器是(.container_16 .grid_i)（i=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]）。

.container_16 .grid_1 {
  width: 40px;
}
.container_16 .grid_2 {
  width: 100px;
}
.container_16 .grid_3 {
  width: 160px;
}
.container_16 .grid_5 {
  width: 280px;
}
.container_16 .grid_6 {
  width: 340px;
}
.container_16 .grid_7 {
  width: 400px;
}
.container_16 .grid_9 {
  width: 520px;
}
.container_16 .grid_10 {
  width: 580px;
}
.container_16 .grid_11 {
  width: 640px;
}
.container_16 .grid_13 {
  width: 760px;
}
.container_16 .grid_14 {
  width: 820px;
}
.container_16 .grid_15 {
  width: 880px;
}

• 第七、八、九部分Prefix Extra Space >> Global/12 Columns/16 Columns，修改的是padding-left。

Prefix Extra Space ：

.container_12 .prefix_3,
.container_16 .prefix_4 {
  padding-left: 240px;
}
.container_12 .prefix_6,
.container_16 .prefix_8 {
  padding-left: 480px;
}
.container_12 .prefix_9,
.container_16 .prefix_12 {
  padding-left: 720px;
}

Prefix Extra Space >> 12 Columns的選擇器為(.container_12 .prefix_i)（i=[1,2,3,4,5,6,7,8,9,10,11]）

Prefix Extra Space >> 16 Columns的選擇器為(.container_16 .prefix_i)（i=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]）

• 第十、十一、十二部分Suffix Extra Space >> Global/12 Columns/16 Columns，修改的是padding-right。

Suffix Extra Space >> Global：

.container_12 .suffix_3,
.container_16 .suffix_4 {
  padding-right: 240px;
}
.container_12 .suffix_6,
.container_16 .suffix_8 {
  padding-right: 480px;
}
.container_12 .suffix_9,
.container_16 .suffix_12 {
  padding-right: 720px;
}

Suffix Extra Space >> 12 Columns與第八部分相對應，修改padding-right。

Suffix Extra Space >> 16 Columns與第九部分相對應，修改padding-right。

• 第十三、十四、十五部分Push Space >> Global/12 Columns/16 Columns，修改的是left。

Push Space >> Global：

.container_12 .push_3,
.container_16 .push_4 {
  left: 240px;
}
.container_12 .push_6,
.container_16 .push_8 {
  left: 480px;
}
.container_12 .push_9,
.container_16 .push_12 {
  left: 720px;
}

Push Space >> 12 Columns的選擇器是(.container_12 .push_i)（i=[1,2,3,4,5,6,7,8,9,10,11]）

Push Space >> 16 Columns的選擇器是(.container_16 .push_i)（i=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]）

• 第十六、十七、十八部分Pull Space >> Global/12 Columns/16 Columns，將left修改為負值。

Pull Space >> Global的選擇器是(.container_i .pull_j)（i=[12,16],j=[0.25i,0.5i,0.75i,i]）

Pull Space >> 12 Columns的選擇器是(.container_12 .pull_i)（i=[1,2,3,4,5,6,7,8,9,10,11]）

Pull Space >> 16 Columns的選擇器是(.container_16 .pull_i)（i=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]）

第十九部分Clear Floated Elements

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after,
.container_16:before,
.container_16:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}
.clearfix:after,
.container_12:after,
.container_16:after {
  clear: both;
}
/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix,
.container_12,
.container_16 {
  zoom: 1;
}

完。

2.3 對960.css的總結

名詞：container,grid,column,prefix,suffix,clearfix,alpha,omega

動詞：push,pull

關于container

你可以選擇.container_12或.container_16作為你的主容器的類，兩者寬度都是960px，只是一個12列一個16列。容器默認水平居中。

關于grid和column

當一個容器的類為.grid_i時（其父容器類為.container_12），它的寬度就是.container_12 .grid_i所對應的寬度了。（16類似）（column類推）

比如可以這樣寫：

<div class=”container_12″>

    <div class=”grid_4″>sidebar</div>

    <div class=”grid_8″>main content</div>

</div>

但是如果你運行它，會發(fā)現(xiàn)排版錯亂，這是因為還沒有設置某些容器的margin。

關于alpha和omega

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

可以來看一個Demo。

關于prefix和suffix

如果你想讓一個元素左邊有空白（padding-left），可以給他添加.prefix_i樣式（父容器類為.container_12），i為空出的列數(shù)。suffix則是控制padding-right，是類似的。

關于push和pull

如果你不想留白，而是想某個容器（父容器類為.container_12）橫向移動，則使用push推和pull拉。

想想自己在屏幕里面，站在左邊，這時候你就可以“推”容器了，方法是給它加上.push_i類，i為推動的列數(shù)。“拉”的方法與之類似。

關于clear

即清理浮動。在以后的應用中慢慢分析。

關于兼容性

A-grade的瀏覽器都行。