纯CSS 导航
<style type="text/css">
<!--
* {
margin:0 0
}
body {
background-color: #000;
}
.mainnav li, mainnav {
float:right;
list-style:none
}
.mainnav a {
background-color: #333;
display: block;
padding:10px 20px;
font-size: 12px;
font-weight: 700;
color: #FFF;
text-decoration: none;
font-family: Arial, "宋体";
margin-left:5px;
border-top-width: 10px;
border-top-style: solid;
border-top-color: #000;
}
.mainnav a:hover,.mainnav .now{
background-color: #666;
padding-top: 14px;
padding-bottom: 14px;
border-top-width: 2px;
border-top-color: #333;
}
#pagebody {
background-color: #666;
padding:10px 10px;
}
-->
</style>
<div style="width:830px;padding:0 auto 20px;margin:0 auto">
<ul class="mainnav">
<li><a href="#" class="now">首页</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">公告</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">相册</a></li>
</ul>
<div>此处显示新 Div 标签的内容</div>
<div id="pagebody" style="clear:both"></div>
</div>
a:hover 伪类非常重要个人导航网页源码，必须掌握
