HTML中的<ul>
时间：2010-08-30 来源：月光疾风
最近在看我们学校新闻网的代码，页面上有一个导航条，是“背景图片+<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> </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等属性。
相关阅读 更多 +
排行榜 更多 +
