CSS3给列表前插入项目序列编号（计数器）
2018-11-01 来源：学做网站论坛
在实际网站制作过程，往往需要给一个列表添加项目序列编号，使数据给用户展现更加清楚。如下图：
给一个列表添加这样的项目序列编号，我们可以使用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调用文章列表的时候递增序列号方法
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
最新资讯
热门推荐