本文是一个使用纯CSS制做书籍目录效果的实际案例，开发了源码下载。

目录效果演示

• CSS3制做书籍目录 16
• WebSocket的JavaScript例子 29
• websocket与node.js的完美结合 59
• CSS3中文手册 252
• Html5参考手册 600
• Django中文手册官方文档 664

演示地址

源码下载（提取码：1abq ）

目录用到的图片

CSS代码

		<style type="text/css">
ul {
	width:450px;margin:0 auto;
	padding:8px 0;border:1px solid #ccc;
	}
ul li {
	width:420px;height:28px;
	margin:0 auto;list-style-type:none;
	background:url(img/line_bg.gif) repeat-x 0 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;}
	ul li span {float:right;height:28px;
	padding:0 0 0 5px;line-height:28px;font-size:14px;
	color:#666;background:#fff;
	}
		</style>

HTML代码

		<ul>
<li>
	<a href="">CSS3制做书籍目录</a>
	<span>16</span>
</li>
<li>
	<a href="https://www.xyhtml5.com/websocket-javascript-example.html">WebSocket的JavaScript例子</a>
	<span>29</span>
</li>
<li>
	<a href="https://www.xyhtml5.com/websocket-perfect-combination-nodejs.html">websocket与node.js的完美结合</a>
	<span>59</span>
</li>
<li>
	<a href="https://www.xyhtml5.com/manual-css3/">CSS3中文手册</a>
	<span>252</span>
</li>
<li>
	<a href="https://www.xyhtml5.com/manual-html5/">Html5参考手册</a>
	<span>600</span>
</li>
<li>
	<a href="https://www.xyhtml5.com/django-docs22/">Django中文手册官方文档</a>
	<span>664</span>
</li>
		</ul>