首页 > Web开发 > 详细

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

时间:2015-05-26 14:26:39      阅读:265      评论: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><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></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://blog.csdn.net/life66881/article/details/46006617

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!