CSS计数器

2015/02/19 36920

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>CSS Counter</title>
	<style type="text/css">
	html {
    	color: #444;
    	font: 16px/1.6 文泉驿微米黑,"WenQuanYi Zen Hei",微软雅黑,"Microsoft YaHei";
	}
	ul {
		list-style: none;
		padding-left: 3em;
	}
	.menu {
		counter-reset: chapter;
	}
	.menu > li {
		counter-increment: chapter;
		counter-reset: section;
	}
	.menu > li:before {
		content: "第" counter(chapter) "章";
		padding-right: .5em;
	}
	.menu ul > li {
		counter-increment: section;
	}
	.menu ul > li:before {
		content: "第" counter(section) "节";
		padding-right: .5em;
	}
	</style>
</head>
<body>
	<ul class="menu">
		<li>法律常识
			<ul>
				<li>法理学</li>
				<li>行政学</li>
				<li>民法</li>
				<li>刑法</li>
				<li>商法与经济学</li>
				<li>宪法</li>
				<li>选举制度</li>
			</ul>
		</li>
		<li>政治常识
			<ul>
				<li>马克思主义哲学</li>
				<li>邓小平理论</li>
				<li>“三个代表”重要思想</li>
				<li>科学发展观</li>
				<li>构建社会主义和谐社会</li>
			</ul>
		</li>
		<li>经济常识
			<ul>
				<li>宏观经济与微观经济</li>
				<li>金融、投资、保险</li>
				<li>国际经济</li>
			</ul>
		</li>
	</ul>
</body>
</html>