HTML中的<ul>

HTML中的<ul>

最近在看我们学校新闻网的代码，页面上有一个导航条，是“背景图片+<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等属性。

posted on 2010-08-30 18:05 月光疾风 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/yuepeng/archive/2010/08/30/1812868.html