960 Grid System

960 grid system   更多介紹( 960 grid system)

除了fixed的12/16欄位選擇，也有960 Fluid 12/16欄位的選擇喔。
也可以自己設定欄寬，然後在由Variable Grid System自動生產出CSS，非常方便。

960 grid system 的欄數提供了兩種選擇，一種為12欄，另一種則為16欄。
而主要的內容寬度則維持為在960px，但在主要內容欄位的左右會各留10px。
但是如果你想要調整內容寬度，不想要是960px，可不可以？當然可以阿！
只要透過Variable Grid System 去進行設定即可。然後馬上即可線上預覽。


而每一個欄位都有對應的寬度，以12欄的例子而言，寬度從1-12欄分別為下
1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10.780px
11.860px
12.940px

在class名稱裡，每一個寬度都有對應的類別(class)名稱，
類別名稱.grid_x中的x代表上述12種寬度，
例如假設你今天想要設定為940px寬的div，只要加上grid_12這個class即可，

所有的grid_X 都是container_Y的子選擇器，
請確定各x相加之後總數為你當初選擇使用的欄數。

舉例說明；

在每一列結束的同時，要記得加上clear類別。
所以可以開始規劃你的Prototype,接著練習看看。




btw,順便介紹一下text gengerator
這個東西能夠幫你生產出固定寬高的p段落裡的文字，讓你預覽。
然後自動生成css，非常方便。所有效果馬上都能夠立即在網頁上預覽。