博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

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

Posted on 2011-10-20 12:57  PHP-张工  阅读(320)  评论(0)  编辑  收藏  举报

代码：

<!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; width:200px; border-right:solid 2px gray; background-color:#eee;">
左部分
</div>
<div style="position:absolute; top:101px; right:0px; min-height:400px; width: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