清华大佬耗费三个月吐血整理的几百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>