CSS3给列表前插入项目序列编号(计数器)
在实际网站制作过程,往往需要给一个列表添加项目序列编号,使数据给用户展现更加清楚。如下图:
给一个列表添加这样的项目序列编号,我们可以使用CSS3的before伪类来添加计数器轻松实现。代码如下:
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>给列表添加连续的序列编号</title>
</head>
<style type="text/css">
li:before{
content: counter(mycounter);
}
li{
counter-increment: mycounter;
}
</style>
<body>
<ul>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
<li>项目列表添加连续序列编号</li>
</ul>
</body>
</html>
除了使用上面的CSS3添加计数器的方法之外,我们还可以使用比较笨的方法:wordpress调用文章列表的时候递增序列号方法