HTML 布局

Posted on 2013-04-15 11:11 PHP-张工阅读(1119) 评论(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>

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

ZjFree-自由自在

公告

搜索

最新随笔

积分与排名

随笔分类 (385)

阅读排行榜

推荐排行榜

HTML 布局