随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

HTML 布局

Posted on   PHP-张工  阅读(1117)  评论(1编辑  收藏  举报

布局特点:

顶部固定、导航菜单固定、底部永远处于页面底部。

代码如下:

<!DOCTYPE html>
 
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        html, body
        {
            padding:0;
            margin:0;
            height:100%;
            position:relative;
        }
        #divHeader
        {
            background-color:rgba(200,200,200,0.95);
            *background-color:#ddd;
            position:fixed;
            width:100%;
            height:50px;
            top:0px;
            outline:solid 5px rgba(200,200,200,0.6);
        }
         
        #divMain
        {
            padding-top:60px;
            padding-bottom:60px;
            padding-left:100px;
            background-color:white;
            _padding-top:10px;
            _padding-bottom:10px;
        }
         
        #divFooter
        {
            background-color:#ddd;
            position:absolute;
            width:100%;
            height:50px;
            bottom:0px;
            _position:;
        }
         
        #divNav
        {
            width:90px; position:fixed; left:0px; top:60px; bottom:60px; overflow:auto;
            _position:absolute;
        }
         
        #divNav a
        {
            display:block;
            padding:3px;
            margin:0 3px;
            background-color:#eee;
        }
         
        #divNav a:hover
        {
            background-color:#aaa;
        }
    </style>
    <script type="text/javascript">
        function addContent()
        {
            for (var i = 0; i < 10; i++)
            {
                document.getElementById('divMain').innerHTML += 'CONTENT<br />';
            }
        }
 
        function resetContent()
        {
            document.getElementById('divMain').innerHTML = '';
        }
    </script>
</head>
<body style="background-color:#fff;">
<div style="position:relative; min-height:100%;">
<div id="divNav">
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
<a href="#">菜单1</a>
</div>
<div id="divHeader">
divHeader
<input type="button" value="add content" onclick="addContent();" />
<input type="button" value="reset content" onclick="resetContent();" />
</div>
<div id="divMain">
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
CONTENT<br />
<div>
haha
</div>
</div>
<div id="divFooter">
divFooter<br />
divFooter<br />
</div>
</div>
</body>
</html>

  

点击右上角即可分享
微信分享提示