!!!!!960栅格系统快速使用指南

现代浏览器中ctrl+u 用于切换是否显示栅格

960的demo分为三个部分，分别展示了几种class的用法：

top部分

分为两竖条，24格系统中一条以30开始，40递增

container_24说明将960px分为24栏竖条。实际使用950px，左右两边还有5px的白边

grid_xx说明占多少栏竖条

空白条10px

css实现：

.grid_xx{

  display:inline;//防止ie6的double margin float bug

  float:left;

  margin-left:5px;

  margin-right:5px;

}

.container_24 .grid_1 {
    width: 30px; 
}

16格系统中是40的竖条 20的间隔

middle部分

30的竖条

使用prefix_xx和suffix_xx来表明占用的前后需要空有多少竖条，故prefix_xx+suffix_xx=23

css实现

.container_24 .prefix_1{
    padding-left: 40px;
}

.container_24 .suffix_1{
    padding-right:40px;
}

使用效果：

注意这个部分每行class应该满足grid+prefix+suffix=24

bottom部分

只有两种

使用push_xx和pull_xx来改变div显示顺序

显然左右与代码顺序相反

css实现：

.push_xx .pull_xx{
  position:relative; 
}

.push_xx{
  left: xx px; 
}

.pull_xx{
  left:-xx px; 
}

使用alpha和omega来取消grid_x的左右白边，主要用于父容器内的子元素

css实现：

.alpha{
  margin-left:0; 
}

.omega{
  margin-right:0; 
}

clear部分

最后是和浮动元素相关的clear问题

原来采用div class=“clear”方法

css代码:

.clear{
  clear:both;

  display:block;

  overflow:hidden;

  visibility:hidden;

  height:0;

  width:0;
}

由于必须引入多余的div，故采用clear-fix方法

.clearfix:after{
  clear:both;

  content:’’;

  display:block;

  font-size:0;

  line-height:0;

  visibility:hidden;

  width:0;

  height:0;
}

上面采用after假类形成插入div clear一样的效果。

* html .clearfix,                            //ie6

*:first-child+html .clearfix{      //ie7
  zoom:1; 
}

消除ie6,7的问题 ie5不再考虑了