摘要：<!DOCTYPE html><head><meta charset="utf-8"><title>网页布局</title><style>a{display: block;width: 100%;height: 100%;text-decoration:none;line-height: 50px; col
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>网页布局</title>
<style>
a{display: block;width: 100%;height: 100%;text-decoration:none;line-height: 50px; color:black;text-align: center;}
a:hover{ background: #e3e3e3 }
.main{width: 1200px;margin:0 auto;}
ul li { list-style:none; display: block;width: 25%;height: 50px;float:left; }
.leirong{width: 100%;}
.f1,.f2,.f3{width: 100%}
.left{width: 30%;height: 200px;background:#ccc;float: left;}
.right{width: 70%;height:200px;background: #233;float: left;}
.top { background:#f5f5f5;height: 100px }
.clear{ clear:both; }
.footer{ background: red;height: 80px; }
</style>
</head>
<body>
<div class="main">
<div class="head">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
<div class="leirong">
<div class="f1">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
<div class="f2">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
<div class="f3">
<div class="left"></div>
<div class="right">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="footer">
</div>
</div>
</body>
</html>
批改老师：韦小宝批改时间：2018-12-19 09:20:18
老师总结：写的还算是可以！下次给代码做个高亮哦！继续加油吧！
