2、按照順序引用三個css檔案。
在html檔案中嵌入**(css為檔案所在目錄)：
rel=
"stylesheet"
type
="text/css"
media
="all"
href
="css/reset.css"
/ >
rel=
"stylesheet"
type
="text/css"
media
="all"
href
="css/text.css"
/ >
rel=
"stylesheet"
type
="text/css"
media
="all"
href
="css/960.css"
/ >
3、定義containers(容器)，分為兩種12(每份80px)和16(每份60px)等分，總寬度為960px。
4、在容器內定義grids (網格)。
網格的總數必須等於container(容器)的數量
class=
″container_16″>
class=
″grid_4″> 寬度為：60px*4=240px-20px=220px(20px為左右各10px間隙)
div >
class=
″grid_12″> 寬度為：60px*12=720px-20px=700px(20px為左右各10px間隙)
div >
div >
5、設定網格的margins（間隙）。
使用方法
class
= 」grid_2 alpha」> 左邊間隙為0
div >
class
= 」grid_2 omega」> 右邊間隙為0
div >
6、留空
**如下
class
="container_16" >
class
="grid_1 prefix_13 suffix_2" >
寬度為40px，左留空13*60px=780px；右留空2*60px=120px
p >
div >
div >
7、清除浮動
塊與塊之間必須新增"clear"以清除浮動
class
="container_16" >
16 column grid
h2 >
class
="grid_16" >
940px
p >
div >
class
="clear" >
div >
class
="grid_1" >
40px
p >
div >
class
="grid_15" >
880px
p >
div >
div >
參考：960 grid system 演示
960 grid system的一點研究
今天看了一下960 grid system的css，感覺真是簡單，共包括3個檔案，第乙個是reset.css，用於重置樣式 第二個檔案是text.css，定義了一些元素的基本樣式 第三個是核心檔案960.css，僅僅只包含了.container x grid x prefix x suffix x ...
960 Grid System 基本原理及使用方法
當然，還有很多人持相反意見，認為css並沒有這麼高階以至於esijmht要涉及到框架！在這裡要講解一下目前在國外很熱門的乙個框架，嚴格講是網格系統，那就是960 grid system。通過這篇教程你會知道使用960框架之後，你的開發工作會更快的開展。不要編輯960.css 不要編輯960.css檔...
960網格系統
可以幫助我們在ps中快速布局 12欄，16欄，24欄 我們也可以利用css樣式表模板快速寫網頁 兩欄布局網頁部分 id class container 12 class grid 12 工具欄div div div class container 12 id header class grid 2 ...