css框架960grid

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，边框等）。