摘要：<!DOCTYPE html><html><head><meta charset="utf_8" /><title>一个简单的网页面</title><style type="text/css">.nav ul li{ list-style:none; width:50px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf_8" />
<title>一个简单的网页面</title>
<style type="text/css">
.nav ul li{ list-style:none; width:50px; height:20px; line-height:20px; text-align:center; background:pink; margin:0px 1px; float:left;}
.clear{ clear:both;}
h1{ text-align:center;}
.biankuang{ width:300px; height:100px; border:1px solid #0033FF; background:red; margin:0 auto; margin-top:10px; line-height:100px; text-align:center; float:left;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
<li>栏目四</li>
<li>栏目五</li>
</ul>
</div>
<div class="clear"></div>
<h1>以下部分为具体内容</h1>
<div class="biankuang">
一个有边框并且背景为红色的长方形
</div>
<div class="biankuang">
一个有边框并且背景为红色的长方形
</div>
<div class="clear"></div>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-17 09:00:35
老师总结：基础课的学习还是比较枯燥的，但是还是要细细掌握好，后面就会有很多精彩效果啦
