css--960框架

css框架(960grid)固宽布局(栅格布局)

1、960框架特点:采用栅格布局把网页宽度固定在960px,使网页不容易变形

 1、960框架的使用方法;  

(1)在html文件中引入相关的外部CSS文件   

(2)定义一个DIV大容器,放下整个页面:   

示例:

<div class="container_12 header"> </div>
    <div class="clear"></div>
    <div class="container_12 content">
        <div class="grid_3 left alpha omega">first</div>
        <div class="grid_6 center alpha omega">second</div>
        <div class="grid_3 right alpha omega">three</div>
    </div>
    <div class="clear"></div>
    <div class="container_12 footer"></div>

2、html引入960框架文件:  

<Link rel="styleSheet type="text/css" hrep="../css/960/960.css"/>  
    <Link rel="styleSheet type="text/css" hrep="../css/960/reset.css"/>  
    <Link rel="styleSheet type="text/css" hrep="../css/960/text.css"/>

3、在上面的例子中,左中右的布局中,每个div都有外边距可使用alpha是去除左边的margin,omega是去除右边的margin   

示例:  

<div class="grid_3 left alpha omega">first</div>
    <div class="grid_6 center alpha omega">second</div>
    <div class="grid_3 right alpha omega">three</div>

4、关于

<div class="clear"></div>

清除之前的布局,开始新的布局

原文地址:https://www.cnblogs.com/wvvv/p/4751001.html