ul无序列表是一个非常重要的HTML标签，页面中许多元素都用它来组织。在52CSS的论坛W3Cbbs.com中有网友提出，如何实现图书目录效果。就此问题，我们形成了下面的实例。
图书目录往往由章节标题，页次，以及破折虚线组成。我们将章节标题建立链接以a标签组织。页次用行内元素span标签组织。这两部分内容分别处于一个独立的列表项li中。虚线的效果以li的背景图片来实现。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
我们看最终的完成效果图：
下面开始HTML编码：
Example Source Code [www.52css.com]<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>
<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对其进行样式定义。
Example Source Code [www.52css.com]ul {
width:480px;
margin:0 auto;
padding:8px 0;
border:1px solid #ccc;
}
width:480px;
margin:0 auto;
padding:8px 0;
border:1px solid #ccc;
}
对UL进行总体样式定义。整体水平居中对齐。
Example Source Code [www.52css.com]ul li {
width:450px;
height:28px;
margin:0 auto;
list-style-type:none;
background:url(line_bg.gif) repeat-x 0 13px;
}
width:450px;
height:28px;
margin:0 auto;
list-style-type:none;
background:url(line_bg.gif) repeat-x 0 13px;
}
设置列表项的宽高，定义背景图片为水平方向重复，垂直方向居于13px的位置。
本文作者：52CSS.com 如需转载请建立本站链接（http://www.52css.com/），并且不得随意改动文章内容、保留此版权声明文本！
Example Source Code [www.52css.com]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;
}
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的背景虚线。
Example Source Code [www.52css.com]ul li span {
float:right;
height:28px;
padding:0 0 0 5px;
line-height:28px;
font-size:14px;
color:#666;
background:#fff;
}
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打造图书目录的效果。
E- mail:
本站ICP备案号：
