css架構960grid

1. CSS架構是一種你能夠使用在你的web項目中概念上的結構，是别人已經寫完的，而且很完善的CSS定義集合。CSS架構一般是CSS檔案的集合，包括基本風格的字型排版，表單樣式，表格布局等等 ————簡單的來說就是站在巨人的肩膀上面，利用别人寫好的東西，不用自己在麻煩一次
2. 由于電腦顯示器有方屏、寬屏，寬屏又分16:9和16:10。分辨率更是多種多樣，這麼多不同模式下得使用者如何能看到外觀整齊、一緻的網站呢？人們發現一個奇妙的事情：960px的寬度是Very Good！無論什麼屏，那種分辨率都通吃。 現在有人專門開發了一組網站架構CSS規則，隻要遵守這些簡單的規則（其實就是class類），你就能快速設計出960px寬度的網頁結構來。
3. 大家可以看看搜狐、百度貼吧……他們的共同特點就是正文兩邊都是空白；
4. 下面正式介紹960grid的用法；挺簡單的！
   1. 首先官方網站去下載下傳一個960grid包：http://960.gs/
   2. 用link引入三個檔案（reset.css/960.css/text.cssreset.css/960.css/text.css//先把這三個檔案複制到你的css檔案夾下）注意不要去編譯它，你自己的css檔案另外寫；
      1. 960.css為主要排版樣
      2. reset.css和text.css，它們的主要作用是為了消除浏覽器間顯示差異準備的，前者消除了html标簽在各浏覽器間的差異，而後者則主要針對的是字型。
5. 容器
   1. grid其實就是一個容器，在這個容器裡，已經給分好了“塊，是以這個容器就給平均分成了塊，有12和16兩種，我們用.container_12 和 .container_16來區分簡而言之就是将這960分成12或者16塊，到底是用12列的還是16列的這就要你來規定了

   2. div class="container_12"></div>——12塊

   <div class="container_12">//大容器 <br>
   <div class="grid_12"></div>-------這一塊使用了一個12列的grid <br>
   </div></li></ol>
              

6. 網格/列
   1. 将網頁均勻的分開（寬度已定，你隻需設定高度）
   2. 下面包含的三個div其實是在一排，為了清除它對身後的CSS設定影響，建議在每個橫向DIV大塊做完之後，都加上class=”clear”進行收尾。

   <div class="container_12"> <br>
   <div class="grid_3 first">第一塊</div> <br>
   <div class="grid_6 second">第二塊</div> <br>
   <div class="grid_3 three">第三塊</div> <br>
     </div> <br>
     <div class="clear"></div> <br>
   </li></ol>
              

7. 間距
   1. 預設情況下，塊與塊之間左右margin都是10px，則列間距為20px，但最左邊的容器不需要左margin，最右邊的容器不需要右margin，是以要改成這樣，用alpha出去左margin，omega除去右margin：

      <div class=”container_12″> <div class=”grid_2 alpha”></div> <div class=”grid_6″></div> <div class=”grid_2″></div> <div class=”grid_2 omega”></div> </div>

因為CSS使用特性來确定哪一個樣式聲明具有高于其它樣式的優先級。”id“比class更重要。用這種方法，我們可以在自己的檔案中重寫那些被class設定的規則（比如寬度，padding，邊框等）。