一般css排版会采用ul + a 的方式实现,css代码如下:
<style>
#header{
width:802px;
height:98px;
background:url(img/headerbg.gif);
}
#nav {
height:26px;
list-style:none;
float:right;
margin-top:72px;
}
#nav li{
float:left;
font-size:14px;
font-weight:bold;
}
#nav li a{
color:#FFFFFF;
text-decoration:none;
padding-top:7px;
display:block;
width:97px;
height:19px;
text-align:center;
background:url(img/nav.gif);
margin-left:2px;
}
#nav li a:hover{
background:url(img/nav.gif);
background-position:0px -26px;
color:#FFFFFF;
}
#nav li a#current{
background:url(img/nav.gif);
background-position:0px -52px;
color:#000000;
}
</style>
</head>
<body>
<div id="header">
<ul id="nav">
<li><a href="#" id="current">首 页</a></li>
<li><a href="#">文 章</a></li>
<li><a href="#">参 考</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">论 坛</a></li>
<li><a href="#">联 系</a></li>
</ul>
</div>
</body>
</html>