zoukankan      html  css  js  c++  java
  • 用Html5制作简单的6列自适应布局

    HTML部分

    <div id="container">
        <h2>6列布局</h2>
        <div class="cols cols6">
           <section class="first col">
              <header>
                 <h3>布局单元1</h3>
              </header>
              <p>布局单元内容区</p>
            </section>
            <section class="col"></section>
            <section class="col"></section>
            <section class="col"></section>
            <section class="col"></section>
            <section class="col"></section>
        </div>
    </div> 

    css部分

    body{
        font:1em Helvetica, Arial, Sans-Serif;
        line-height:1.5em;
        color:#333;
        font-size:13px;
        background:#fff;
        text-align:center;
    }
    .first {
        margin-left:0 !important;
    }
    #container {
        margin:0 auto;
        max-width:1240px;
        min-width:760px;
        position:relative;
        text-align:left;
    }
    .col {
        float:left;
        display:inline; 
        margin-left:2%;
        background:#f1f1f1; 
    } 
    .cols6 .col{width:15%;} /*6列布局的宽度*/

    之所以使用百分比作为宽度单位,这样做可以让布局格式在任何分辨率的屏幕下都可以自动适应,甚至800*600的分辨率都可以。需要说明的是,如果你现在用IE浏览器看这个页面,几乎是乱排的,因为IE9以下的版本还没有支持Html5,所以现在就先用Firefox或Opera、Safari、Google Chrome来预览它吧。

  • 相关阅读:
    WebQQ2.0 PHP
    HTML文档类型 PHP
    字符●圆角 PHP
    IIS日志分析器 PHP
    JS 像素数字 PHP
    3DTagCloud3D标签云 PHP
    QQ截屏工具提取 PHP
    .NET嵌入DLL ILMerge工具应用 PHP
    JS CSS 压缩工具(GUI界面) PHP
    Javascript 函数初探
  • 原文地址:https://www.cnblogs.com/JoannaQ/p/2661295.html
Copyright © 2011-2022 走看看