zoukankan html css js c++ java

常见的网页布局二

效果:

html代码:

<body>
    <div id="gzwm">
        关注我们
        
    </div>
    <div id="header">
        <div id="c_header">顶部图片</div>        
    </div>
    <div id="nav">
        <div id="c_nav">导航内容</div>
    </div>
    <div id="content">
        <div id="c_content">内容信息</div>        
    </div>
    <div id="bottom">
        <div id="c_bottom">底部信息</div>
    </div>
</body>

Css代码:

<style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
            font-size:12px;
        }
        #c_header,#c_nav,#c_content,#c_bottom {
            position: absolute;
            width:1000px;
            left:50%;
            margin-left:-500px;
            border:1px solid #00f;
        }
        #header,#bottom {
            height:70px;
            background: #811;
            color:#fff;
        }
        #nav {
            height:30px;
            background: #981;
            color:#fff;
        }
        #content {
            background: #eee;
            height:600px;
        }
        #gzwm {
            height:40px;
            filter:alpha(opacity=80);       /* IE */
            -moz-opacity:0.8;              /* Moz + FF */
            opacity: 0.8; 
            background: #000;
            width: 100%;
            position: fixed;
            color:#f00;
            z-index: 9999;
            bottom:0px;
        }
    </style>

查看全文

相关阅读:
1月28日 layout_list_item
1月27日 listview_MyListAdapter
1月26日 listviewxml
1月25日 textview
1月24日人月神话3
体温填报（三）
体温填报（二）
体温填报（一）
家庭记账本（六）
家庭记账本（五）

原文地址：https://www.cnblogs.com/zhangbaowei/p/4750189.html