zoukankan      html  css  js  c++  java
  • div+css布局之固定浮动布局

    fixedFloat.htm

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"
    >
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>固定浮动布局-三列</title>
    <link rel="stylesheet" style="text/css" href="style2.css">
    </head>

    <body>
    <div id="header"><h1>上标题</h1></div>
    <div id="body">
    <div id="navl">左导航</div>
    <div id="main">中内容</div>
    <div id="navr">右导航</div>
    </div>
    <div id="footer"><p>下版权</p></div>
    </body>
    </html>

    style.css

    /* CSS Document */
    *
    {
    margin
    :0;
    padding
    :0;
    }
    body
    {
    margin
    :10px;
    }
    #header
    {
    border
    :1px solid black;
    width
    :600px;
    height
    :60px;
    margin
    :0 auto;
    margin-bottom
    :10px;
    }
    #header h1
    {
    height
    :60px;
    line-height
    :60px;
    font-size
    :16px;
    text-align
    :center;
    }
    #body
    {
    width
    :600px;
    margin
    :0 auto;
    }
    #navl
    {
    border
    :1px solid black;
    width
    :150px;
    height
    :500px;
    float
    :left;
    margin-bottom
    :10px;
    background
    :lightcyan;
    }
    #main
    {
    border
    :1px solid black;
    width
    :294px;/*边框也算一个像素*/
    height
    :500px;
    float
    :left;
    margin-bottom
    :10px;
    background
    :lightblue;
    }
    #navr
    {
    border
    :1px solid black;
    width
    :150px;
    height
    :500px;
    float
    :right;
    margin-bottom
    :10px;
    background
    :lightyellow;
    }
    #footer
    {
    border
    :1px solid black;
    width
    :600px;
    height
    :60px;
    line-height
    :60px;
    margin
    :0 auto;
    text-align
    :center;
    clear
    :both;
    }

    效果如下:

    这种布局的好处是:由于固定了div的宽和高,所有改变浏览器窗口的大小不是影响到div的显示。

  • 相关阅读:
    五种IO模型透彻分析
    linux正则表达式
    洛谷P1242 新汉诺塔 【神奇的递归】
    【NOIP2012】疫情控制
    [ZJOI2007]棋盘制作 【最大同色矩形】
    [NOIP2008]双栈排序 【二分图 + 模拟】
    LCA的倍增算法
    最大权闭合子图
    小Z的袜子 题解报告【莫队】
    ZJOI2012网络 题解报告【LCT】
  • 原文地址:https://www.cnblogs.com/zfc2201/p/2147091.html
Copyright © 2011-2022 走看看