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