其实实现导航菜单有多方式,例如可以用table标签,但是现在流行的是div+css样式,今天就用div+css和标签<ul>来实现:
网页代码如下:
<div id="nav" class="auto">
<ul>
<li><a href="demo.html">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="submit.html">提交站点</a></li>
</ul>
</div>
css样式代码:
#nav {
height:50px;
}
#nav ul {
margin:0 0 0 25px;
}
#nav ul li {
float:left;
margin:0 10px 0 0;
}
#nav ul li a {
color:black;
font-size:13px;
font-weight:bold;
display:block;
width:103px;
height:27px;
text-align:center;
line-height:27px;
margin:10px 0 0 0;
}
#nav ul li a:hover {
background:url(hover.png);
color:#ffffff;
text-decoration:none;
}
下面是效果图: