<!-- Feedsky FEED發布代碼開始 --> 如果您喜歡這些文章，歡迎點擊此處訂閱本Blog <!-- FEED自動發現標記開始 --> <link title="RSS 2.0" type="application/rss+xml" rel="alternate"> <!-- FEED自動發現標記結束 -->

<!--Google 468*60橫幅廣告開始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; google_ad_width = 468; google_ad_height = 60; google_ad_format = "468x60_as"; google_ad_type = "image"; //2007-07-26: CSDN google_ad_channel = "6063905817"; google_color_border = "6699CC"; google_color_bg = "E6E6E6"; google_color_link = "FFFFFF"; google_color_text = "333333"; google_color_url = "AECCEB"; google_ui_features = "rc:6"; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--Google 468*60橫幅廣告結束-->

CSS框架已經出現很長時間了，關于這些框架的用處也被我們討論了很多遍了。有人說，CSS框架不夠先進，還有人說這些框架大大的節省了他們的開發時間。在此，我們將不再討論這個問題。

前段時間，我了解到了CSS框架。經過對Malo、BluePrint和960做了實驗對比后，我得出一個結論：我最喜歡960CSS框架。

本教程將解釋這個框架的基本原理，這樣你就可以用960來快速進入開發。（注：960網格系統官方網站 點擊進入 ）

基本原理

你必須知道一些基本原理來“ 學習這個框架是如何工作的 ”。你可以通過實驗（或者是用firebug）來學習它，不過我也將會在這里為你介紹它。讓我們開始吧。

不要編輯960.css文件

首先是一個小提示：不要編輯960.css文件，否則，將來你將不能更新這個框架。因為盡管我們需要布局我們的HTML，我們將創建一個獨立的CSS文件。

加載網格

因為我們可以使用一個外部文件的CSS代碼，我們必須在我們的HTML網站中加載它們，我們可以通過以下代碼來實現：

這些做好了之后，我們必須添加我們自己的CSS文件。例如，你可以叫這個文件為 style.css 或 site.css 或者其它任何名字。用下面代碼引用這個文件：

容器

在960框架中，你可以選擇名為 .container_12 和 .container_16 的兩個容器class。他們都是960px的寬度（這就是為什么叫960），它們的不同是分的列數不同。 .container_12 被分割為12列， .container_16 被分割為16列。這些960px寬的容器是水平居中的。

網格/列

有很多列寬可供選擇，而且在這兩個容器里，這些寬度也不相同。你可以通過打開 960.css 文件來查看這些寬度。但是這對于設計一個網站來說是不必要的。有一個小技巧可以讓這個框架更加易用。

比如，你想要在你的容器里建兩列（叫sidebar/content）。你可以這樣做：

可以看到，你的第一列（grid_ 4 ）的數字加上第二列（grid_ 8 ）的數字正好是 12 。也就是說，你不必知道每一列的寬度，你可以選擇列寬通過一些簡單的數學計算。

如果我們要建一個4列的布局，代碼可以是這樣的：

正如你所看到的那樣，這個系統依然很完美。但是如果你想使用嵌套的列的話，你會發現它是有問題的。比如，如果后面三列都屬于content列：

你會發現這錯位了，不過不用著急，這正是我們下一節要說的。

間距

默認情況下，每列之間都有間距。每一個grid_（這里代表數字）class左右都有10個像素的間距。也就是說，兩列之間，總共有20px的間距。

20px間距對創建一個有足夠寬的空白間距的布局來說是很棒的，它可以讓一切看起來很自然。這也是我喜歡使用960的原因之一。

在上面的例子中，我們遇到了個問題，現在我們就來解決它。

問題是，每一列都有左右邊距。而嵌套的三列中，第一列和最后一列是不需要邊距的，解決方法是：

我們可以簡單的添加” alpha “樣式來去掉左邊的間距，添加“ omega ”樣式來去除右邊的間距。這樣我們剛剛創建的這個例子在任何瀏覽器里面就很完美了（當然包括IE6）。

樣式

好了，你現在已經完全了解如果用960框架來創建一個網格布局的基本原理了。當然，我們也可以添加一些樣式到我們的布局中。

因為CSS使用特性來確定哪一個樣式聲明具有高于其它樣式的優先級。” id “比 class 更重要。

用這種方法，我們可以在自己的文件中重寫那些被class設定的規則（比如寬度，padding，邊框等）。

補充

以下是我做的一個簡單的測試頁面，代碼如下：

以下是960官方的實例文檔，可以看看它的網格是如何寫的：

<!--新Google 468*60橫幅廣告開始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x60, 創建于 08-8-6 */ google_ad_slot = "7368701459"; google_ad_width = 468; google_ad_height = 60; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468*60橫幅廣告結束-->

<!--新Google 468x15 橫鏈接單元開始--><script type="text/javascript"><!-- google_ad_client = "pub-7343546549496470"; /* 468x15 橫鏈接單元 */ google_ad_slot = "5785741422"; google_ad_width = 468; google_ad_height = 15; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><!--新Google 468x15 橫鏈接單元結束-->

<!-- Google Reader shared發布代碼開始 --><script type="text/javascript" src="http://www.google.com/reader/ui/publisher.js"></script><script type="text/javascript" src="http://www.google.com/reader/public/javascript/user/00697638153916680411/state/com.google/broadcast?n=5&amp;callback=GRC_p(%7Bc%3A%22green%22%2Ct%3A%22%5Cu8FD9%5Cu4E9B%5Cu6587%5Cu7AE0%5Cu4E5F%5Cu503C%5Cu5F97%5Cu4E00%5Cu770B%22%2Cs%3A%22false%22%7D)%3Bnew%20GRC"></script><!-- Google Reader shared發布代碼結束 -->

使用960網格系統(960 Grid System)設計網頁