zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    华硕B360主板装机找不到固态硬盘启动
    Maxwell平滑升级流程
    快速导入Excel数据到mysql
    Docker
    Rest之路
    Rest之路
    Docker -- resolve "join node timeout" error
    (转) Docker
    Docker
    Docker
  • 原文地址:https://www.cnblogs.com/wvvv/p/4751001.html
Copyright © 2011-2022 走看看