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>

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

  • 相关阅读:
    使用CSS将图片转换成黑白(灰色、置灰)
    require.js
    Tortoisegit安装下载
    谷歌浏览器添加扩展程序
    IOS 照相问题
    java的interface和PHP的区别
    Object中的hashCode方法
    PHP、js、Java中的匿名函数、闭包、回调函数
    Java和PHP中的浅克隆和深克隆
    unicode字符编码中一些专业词汇的全称
  • 原文地址:https://www.cnblogs.com/wvvv/p/4751001.html
Copyright © 2011-2022 走看看