HTML中的

最近在看我们学校新闻网的代码，页面上有一个导航条，是“背景图片+<ul>”实现的。其代码如下：

 

代码:导航条

1 <div class="nav">
2     <ul>
3         <a href="index.jsp" target="_parent"><li></li></a>
4         <a href="search.jsp" target="_blank"><li></li></a>
5         <a href="special.jsp" target="_blank"><li>&nbsp;</li></a>
6     </ul>
7  </div>

相应的CSS文件内容如下：

 

.nav{ width:1000px; height:30px;}
.nav ul{ list-style:none; margin-left:-30px; margin-top:-13px; *margin:0; -margin:0;}
.nav ul a li{ float:left; width:82px; *width:83px; -width:40px; height:30px; margin:0px; line-height:30px; text-align:center;}
.nav ul a:hover li{ cursor:pointer;}

普通的ul中，各个li项目都是竖着排列的，可以通过float:left来改变成横向排列。每一项要占多少像素，是由-width:40px决定的。具体宽度可以测量一下图片上每一个小块的宽度(每一个项目占的宽度都一样)。

除此之外，还有其他属性可以设置。

如果想去掉每个项目前面的列表符，可以在ul中设置list-style:none; 如果想让列表离开父容器一定距离，可以设置margin等属性。