转载:http://blog.sina.com.cn/s/blog_7a602f7f01014jd9.html
960GS框架基础学习
第一步:
下载960GS框架
第二步:
在html代码中引入3个需要使用的css文件
<link rel="stylesheet" type="text/css" href="css/960.css"/>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/text.css"/>
第三步:
来试试效果
在body中添加如下代码
<div class="container_12 clearfix">
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
<div class="grid_1">960网格布局系统</div>
</div>
第四步:
自己拷贝代码看看效果如何
可以看到这里将整个页面均分成了12等份
OK,到这里,我们只是做了一个960GS的例子。下面该是了解下960GS的基本知识了。
下面是有关960GS的一些基本知识,请务必掌握这些原则。
-
页面宽度:960px
-
容器:container_X ,后面的X表示的数字,例如container_12表示将页面进行12等份,container_16表示将页面进行16等份。960GS中有12、16、24、32四种布局方式。
-
网格:grid_Y , 后面的Y同样表示数字,例如grid_1表示第一等份,如果容器为12等份,则Y的最大值为12。Y表示的第几等份,也可以说是第几列。
-
Margins:每个grid_Y类都有10px的左margins和右margins,也就是说两列之间的margin和是20px。有时候我们不需要这些margin,在grid_Y后面添加上alpha去除左边margin,在grid_Y后面添加omega去除右边margin。
-
范例:去除左边的margin
-
<div class="grid_1 alpha">grid_1</div>
-
范例: