炫意html5
最早CSS3和HTML5移动技术网站之一

CSS/CSS3制做书籍目录(附源码)

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

目录效果演示

演示地址

源码下载(提取码:1abq )

目录用到的图片

用到的图片:一个Gif的小图片

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>

炫意HTML5 » CSS/CSS3制做书籍目录(附源码)

CSS3教程HTML5教程