CSS. 网格960系统

浏览模板的源代码和样式，你可能会看到这样的类:grid_6”, “grid_8”. 类使用的类 网格960系统. 让我们看看这个系统是什么，它能提供什么.

960网格系统是一种精简的努力 web开发 工作流通过提供常用的尺寸，基于960像素的宽度. 有几个变体的 layout. 最常用的是12列、16列和24列网格.

你可以看到 layout 块适合网格列. 使用可用的类，您可以轻松更改 website layout 根据您的需要.

Usage

使用网格系统的每个模板都包含网格.CSS文件中可以看到所使用的特定类. 让我们看看如何使用网格系统.

Open the grid.CSS文件，你能看到什么:

 在css文件的开头，你可以看到:

columns:24
列宽:30
Gutter width:10

因此，初始文件信息显示了所使用的列数，列宽度和 gutter width.

然后你就可以看到班级了 .container_24 {} -这个类应该用于容纳你所有人的容器 website content.

注意:可以调用main类 container_12 or container 16 取决于所使用的列的数量.

然后是课程 .grid_1, .grid_2 etc. -这些类可以用来设置内部块的宽度. 具有网格类的块应该放在具有类container_24的块中.

这些类定义了块的宽度:

.container_24 .grid_2 {

width:70px;

} 

例如下面的代码 layout is:

Some content


Some content


Some content


Some content

In this html layout 使用了以下网格类:

.container_24 {
	margin-left:汽车;
	margin-right:汽车;
	width: 960px;
}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18, .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
	显示:内联;
	float: left;
	位置:相对;
	margin-left: 5 px;
	margin-right: 5 px;
}

.container_24 .grid_9 {
	width:350px;
}

.container_24 .grid_12 {
	width:470px;
}

.container_24 .grid_15 {
	width:590px;
}

您还可以使用以下附加类:

.prefix_1, .prefix_2 Etc -定义块左填充(块从左侧缩进);

.suffix_1, .suffix_2 Etc -定义块的右填充(块从右侧缩进);

更多关于grid960系统的信息可以在官方网站上看到 website at http://960.gs/.