网页布局

2015/06/07 31828

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<html>
<head>
    <title>布局实例</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style type="text/css">
        body{text-align: center;}
        .h_top{ width: 98%; background: yellow; height: 30px;margin: 10px;}
        .h_nav{width: 98%; background: yellow; height: 30px;margin: 10px;}
        header{ background:#ce1aba; width: 100%; height: 100px; padding-top: 5px;}
        .container{ background: pink; width: 100%; height: 500px; padding-top: 15px; }
        footer{ background:#ce1aba; width: 100%; height: 80px;}
        .cont_banner{ background:greenyellow; height: 150px; margin: 15px; margin-top: 0px; }
        .cont_info{ background:greenyellow; height: 300; margin: 15px; margin-top: 0px; }
        .info_left{ background:blue; width: 70%; height: 280px; float: left; margin: 10px;}
        .info_right{background:blue; width: 25%; height: 280px; float: right; margin: 10px;}
        .info_news{background:orange; width: 96%; height: 120px;  margin: 10px;}
        .info_pro{background:orange; width: 96%; height: 120px;  margin: 10px;}
    </style>
</head>
<body>
    <!--头部-->
    <header>
        <div class="h_top"></div>
        <div class="h_nav"></div>
    </header>
    <!--内容主体-->
    <div class="container">
        <div class="cont_banner"></div><!--广告-->
        <div class="cont_info"><!--广告下的信息，第二个红框-->
            <div class="info_left"><!--左边的蓝框-->
                <div class="info_news"></div><!--上边的深蓝框-->
                <div class="info_pro"></div><!--下边的深蓝框，产品展示-->
            </div>
            <div class="info_right"></div><!--右边的蓝框，公司信息-->
        </div>
    </div>
    <!--底部-->
    <footer></footer>
</body>
</html>