• 类似博客园的左中右活动布局 PHP


    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>无标题页</title>
    <style type="text/css">
    body, html
    {
    width
    :100%;
    height
    :100%;
    }

    *
    {
    margin
    :0px; padding:0px;
    }

    body
    {
    font-size
    :14px;
    line-height
    :1.5;
    font-family
    :Consolas Tahoma Verdana;
    }
    </style>
    </head>
    <body>
    <div style="background-color:#eff; border-bottom:solid 1px gray; height:100px;">顶部</div>
    <div style="position:absolute; top:101px; left:0px; min-height:400px; 200px; border-right:solid 2px gray; background-color:#eee;">
    左部分
    </div>
    <div style="position:absolute; top:101px; right:0px; min-height:400px; 200px; border-left:solid 2px gray; background-color:#eee;">
    右部门
    </div>
    <div style="margin-left:200px; margin-right:200px; padding:10px; min-height:380px;">
    内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容 内容
    </div>
    <div style="background-color:#eff; border-top:solid 1px gray; height:100px;">底部</div>
    </body>
    </html>

    下载:https://files.cnblogs.com/zjfree/htmlAutoLeftRight.rar


    欢迎转载,转载请注明:转载自[ http://www.cnblogs.com/zjfree/ ]
  • 相关阅读:
    hdu 4825 Xor Sum (01 Trie)
    hdu 5877 Weak Pair (Treap)
    bzoj 1861: [Zjoi2006]Book 书架 (splay)
    bzoj 1503: [NOI2004]郁闷的出纳员 (splay)
    hihocoder#1333 : 平衡树·Splay2 (区间操作)
    「BZOJ1251」序列终结者 (splay 区间操作)
    二进制运算符的相关运算
    Bzoj 1085: [SCOI2005]骑士精神 (dfs)
    Bzoj 1083: [SCOI2005]繁忙的都市 (最小生成树)
    Bzoj 1088: [SCOI2005]扫雷Mine (DP)
  • 原文地址:https://www.cnblogs.com/zjfree/p/2218819.html
Copyright © 2020-2023  润新知