去官网下载960 grid,解压后可以看到css下面有如下文件:
960.css是一个综合性文件。我们要引入960 ,reset和text 3 个文件。
一般情况下调用:
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/reset.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/text.css” />
<link rel=”stylesheet” type=”text/css” media=”all” href=”path/to/960/960.css” />
如果我们想只使用12/16/24栅格,则不要包含960.css,引入对于的栅格css即可。
我下载的960 grid margin-left和margin-right为5px,这意味着gutter为10px。
样式说明:
container_x:容器样式,x列
grid_x:每列宽度
alpha:用于清除左边10px的margin
omega:用于清除右边10px的margin
prefix_xx:左补空
suffix_xx:右补空
clear或<hr/>:重新开始(官方在使用hr)
push_x:左偏移
pull_x:右偏移
alpha和margin设置如下:
.alpha {
margin-left: 0;
}
.omega {
margin-right: 0;
}
更多: