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>

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

  • 相关阅读:
    输入框只能输入正数且保留小数后2位数字,正则
    vscode安装ESlint配置
    kubreretes && docker 模块
    python3安装sqlite3库
    dokcerfile 制作Msql镜像
    前端模板
    Python SMTP发送邮件
    k8s-api
    openpyxl
    k8s mysql主从
  • 原文地址:https://www.cnblogs.com/wvvv/p/4751001.html
Copyright © 2011-2022 走看看