热门搜索: css学习    js    yii框架    seo优化    js效果    css教程    

HTML 布局实例

时间:2015-09-05 14:12 文章来源:未知 点击次数:

html布局特点:

顶部固和导航菜单固定,任由页面多长,都会固定在屏幕上方。而底部永远处于页面底部。中间部分有js加入任意内容(需要修改成你需要加的内容,此处用js实现的。)。

<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="http://www.weberlove.com">菜单1</a>
<a href="http://www.weberlove.com">菜单2</a>
<a href="http://www.weberlove.com">菜单3</a>
<a href="http://www.weberlove.com">菜单4</a>
<a href="http://www.weberlove.com">菜单5</a>
<a href="http://www.weberlove.com">菜单6</a>
<a href="http://www.weberlove.com">菜单7</a>
<a href="http://www.weberlove.com">菜单8</a>
<a href="http://www.weberlove.com">菜单9</a>
<a href="http://www.weberlove.com">菜单10</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>
你好!
</div>
</div>
<div id="divFooter">
divFooter<br />
divFooter<br />
</div>
</div>
</body>
</html>

需要的可以拿去用一用。很多的网站都会有这种效果。很适用的。

希望能帮助到大家 ,也希望大家多多支持本站,并帮忙点点网站广告。感激不尽。

    热门排行