导航位置：首页 > 技术开发 > 前端技术开发
前端网页LI列表通过CSS增加序号 网页列表自动增加序号
豆腐果2023-02-28围观：点赞：
做网页的时候需要li列表里加上序号（比如排行榜之类），以往的做法是通过背景图来定义，现在用css就直接可以了，方便很多，具体代码如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS序号</title>
<style>
body{background: #362424}
ul, li {
list-style: none;
}
ul li a {
text-decoration: none; font-weight: bold; color:#FFF;
}
li {
counter-increment: number;
}
li::before {
content: counter(number);
color:#838383;
margin-right: .8em;
}
</style>
</head>
<body>
<ul>
<li><a href="#">测试序号一</a></li>
<li><a href="#">测试序号二</a></li>
<li><a href="#">测试序号三</a></li>
<li><a href="#">测试序号四</a></li>
<li><a href="#">测试序号五</a></li>
</ul>
</body>
</html>
以上重要的是counter-increment: number;和content: counter(number);代码。
共有0条评论