DIV CSS 佈局教程網

當然，還有很多人持相反意見，認為CSS並沒有這麼高級以至於要涉及到框架！在這裡要講解一下目前在國外很熱門的一個框架，嚴格講是網格系統，那就是960 Grid System。通過這篇教程你會知道使用960框架之後，你的開發工作會更快的開展。

960 Grid System 基本原理

不要編輯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文件中的樣式。