CSS实例：用ul+li打造图书目录效果

ul无序列表是一个非常重要的HTML标签，页面中许多元素都用它来组织。就此问题，我们形成了下面的实例。
图书目录往往由章节标题，页次，以及破折虚线组成。我们将章节标题建立链接以a标签组织。页次用行内元素span标签组织。这两部分内容分别处于一个独立的列表项li中。虚线的效果以li的背景图片来实现。


下面开始HTML编码：

 

<ul>
    <li><a href="http://www.52css.com/article.asp?id=947">杂谈24则CSS网页布局开发小技巧 </a><span>9</span></li>
    <li><a href="http://www.52css.com/article.asp?id=946">css expression属性将javascript与css结合起来 </a><span>719</span></li>
    <li><a href="http://www.52css.com/article.asp?id=945">CSS网页布局及网站开发常犯的几种错误 </a><span>329</span></li>
    <li><a href="http://www.52css.com/article.asp?id=941">CSS控制字符宽度省略号效果 兼容浏览器 </a><span>152</span></li>
    <li><a href="http://www.52css.com/article.asp?id=939">一个IE6在no-repeat情况下依然重复背景图片的BUG </a><span>1000</span></li>
    <li><a href="http://www.52css.com/article.asp?id=938">完善IE中伪类:hover的使用及BUG 续 </a><span>10</span></li>
</ul>

这就是一个典型的UL无序列表。在列表项LI中存在着A和SPAN两种元素。以CSS对其进行样式定义。

 

ul {
width:480px;
margin:0 auto;
padding:8px 0;
border:1px solid #ccc;
}

对UL进行总体样式定义。整体水平居中对齐。

 

ul li {
width:450px;
height:28px;
margin:0 auto;
list-style-type:none;
background:url(line_bg.gif) repeat-x 0 13px;
}

设置列表项的宽高，定义背景图片为水平方向重复，垂直方向居于13px的位置。

 

ul li a {
float:left;
height:28px;
padding:0 5px 0 0;
line-height:28px;
font-size:14px;
color:#00f;
text-decoration:none;
background:#fff;
}

定义A元素的CSS样式。设置向左浮动后自动转换为块元素，定义高度与右内边距。特别注意需要设置背景色为白色#fff。避免了文字下面出现LI的背景虚线。

 

ul li span {
float:right;
height:28px;
padding:0 0 0 5px;
line-height:28px;
font-size:14px;
color:#666;
background:#fff;
}

定义SPAN元素的CSS样式。其原理与A元素类似。最终以CSS实现了用ul+li打造图书目录的效果。

 

 

本文转自诺库技术网