码迷,mamicode.com
首页 > Web开发 > 详细

CSS3使用计数器自动添加数字序号功能

时间:2015-05-26 14:08:54      阅读:109      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS计数器</title>
<style type="text/css">
html {
color: #444;
font: 16px/1.6 微软雅黑,"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>
<div>http://www.999jiujiu.com/</div>
<ul class="menu">
<li>ASP.net教程
<ul>
<li>变量</li>
<li>函数</li>
<li>对象</li>
<li>数据库</li>
<li>输出</li>
</ul>
</li>
<li>java教程
<ul>
<li>变量</li>
<li>函数</li>
<li>对象</li>
<li>数据库</li>
<li>输出</li>
</ul>
</li>
</ul>
</body>
</html>

CSS3使用计数器自动添加数字序号功能

标签:

原文地址:http://www.cnblogs.com/life6688/p/4530365.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!