當然，還有很多人持相反意見，認為css並沒有這麼高階以至於esijmht要涉及到框架！在這裡要講解一下目前在國外很熱門的乙個框架，嚴格講是網格系統，那就是960 grid system。通過這篇教程你會知道使用960框架之後，你的開發工作會更快的開展。不要編輯960.css
不要編輯960.css檔案，如果你修改了它，那麼你今後將無法更新這個框架。
讀取網格
在我們使用外部檔案中的css**之前，首先要在我們的html檔案中呼叫它們。像這樣呼叫:
esijmhtss」 media=」all」 href=」path/to/960/reset.css」 />
當我們呼叫好它們以後，我們要呼叫自己的css檔案了。例如，你也許會將你的css檔案命名為style.css或site.css或者其它什麼的。這樣呼叫它:
在960框架中，你可以選擇兩種類名為.container_12 和 .container_16的容器。這兩種容器都是960px的寬度(這就是為什麼叫做960 grid),但他們的不同之處是它們包含不同數量的列。顧名思義，.container_12的容器被分為12列，而 .container_16被分為16列。這兩種960px寬的容器都是水平居中的。
你可以選擇很多種不同的列寬組合，不過在這兩種容器中是有所不同的。你可以通過開啟960.css來了解這些寬度，但這對於設計乙個**並沒有什麼必要。在這裡將乙個很有用的技巧讓你使用框架更加容易。
例如:如果你想在你的容器中僅使用兩列(分別是主內容區/側邊欄)，你可以這樣做:
sidebar
程式設計客棧ss=」grid_8″>main content
看到上面的**你也許已經明白，不過我還是要講一下。也就是說你在container_12這個容器中使用了grid_4和grid_8兩列，4+8恰好等於12！明白了嗎？使用網格系統的好處之一就是你不用去計算沒列的寬度到底是多少，省去了很多運算。
下面讓我們看看如何編寫四列布局:
sidebar
main content
photo』s
www.cppcns.comquo;grid_2″>advertisement
正如你看到的，這個系統工作得很好。如果你嘗試使用你的瀏覽器讀取他的話，你會發現有一些不對勁的地方。不過不要緊，那正是我們下乙個話題要討論的。
預設情況下，每列之間都會存在一些margin。每個grid_(這裡插入數值)類都有10px的左margin和右margin。也就是說兩列之間的margin值是20px。
20www.cppcns.compx的margin能讓布局保持應有的留白並看上去更平滑，這也是我喜歡960 grid system的原因之一。
在上面的例子中，我們將它使用瀏覽器讀取時出現了一些問題，現在我們來修復它。
問題在於每個列都包含左margin和右margin，但是最左面的列不應該有左margin，最右面的列不應該有右margin。下面是解決方法:
sidebar
main content
photo』s
advertisement
你僅需新增alpha類來去除左margin，新增omega類去除右margin。好了，現在我們的布局已經可以完美在瀏覽器中對齊了。(是的，包括ie6)
事實上，你已經掌握了如何使用960框架建立基本的網格布局了。不過你也許還想為自己的布局新增一些樣式。
sidebar
main content
photo』s
advertisement
由於css使用優先順序的形式來決定如何解釋樣式，而id要比class的優先順序高。這樣我們就可以在我們的獨立css檔案中以id選擇符建立個性化的樣式了。如果湊巧有的樣式屬性與960相同但值又不同，瀏覽器會優先選擇你的css檔案中的樣式。
本文標題: 960 grid system 基本原理及使用方法
本文位址:
爬蟲基本原理及概念
爬蟲在網路中爬行的時候，將web 上的網頁集合看成是乙個有向圖，從給定的起始 1 深度優先演算法 該演算法是指網路爬蟲會從選定的乙個超連結開始，按照一條線路，乙個乙個鏈結訪 問下去，直到達到這條線路的葉子節點，即不包含任何超連結的html 檔案，處理完這 到達葉子結點。這個方法有個優點是網路爬蟲在設...
MapReduce基本原理及應用
一 mapreduce模型簡介 mapreduce將複雜的 執行於大規模集群上的平行計算過程高度地抽象到了兩個函式 map和reduce。它採用 分而治之 策略，乙個儲存在分布式檔案系統中的大規模資料集，會被切分成許多獨立的分片 split 這些分片可以被多個map任務並行處理 1.map和redu...
Redux基本原理和使用
redux不是說任何的應用都要用到它，如果遇到了react解決不了得問題，可以考慮使用它。例如 使用者的使用方式複雜 不同身份的使用者有不同的使用方式 比如普通使用者和管理員 多個使用者之間可以協作 與伺服器大量互動，或者使用了websocket view要從多個 獲取資料 redux的設計思想 1...