CSS3給列表前插入項(xiàng)目序列編號(hào)（計(jì)數(shù)器）
2018-11-01 來(lái)源：學(xué)做網(wǎng)站論壇
在實(shí)際網(wǎng)站制作過(guò)程，往往需要給一個(gè)列表添加項(xiàng)目序列編號(hào)，使數(shù)據(jù)給用戶展現(xiàn)更加清楚。如下圖：
給一個(gè)列表添加這樣的項(xiàng)目序列編號(hào)，我們可以使用CSS3的before偽類來(lái)添加計(jì)數(shù)器輕松實(shí)現(xiàn)。代碼如下：
<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>給列表添加連續(xù)的序列編號(hào)</title>
</head>
<style type="text/css">
li:before{
?content: counter(mycounter);
}
li{
?counter-increment: mycounter;
}
</style>
<body>
<ul>
<li>項(xiàng)目列表添加連續(xù)序列編號(hào)</li>
<li>項(xiàng)目列表添加連續(xù)序列編號(hào)</li>
<li>項(xiàng)目列表添加連續(xù)序列編號(hào)</li>
<li>項(xiàng)目列表添加連續(xù)序列編號(hào)</li>
<li>項(xiàng)目列表添加連續(xù)序列編號(hào)</li>
<li>項(xiàng)目列表添加連續(xù)序列編號(hào)</li>
</ul>
</body>
</html>
除了使用上面的CSS3添加計(jì)數(shù)器的方法之外，我們還可以使用比較笨的方法：wordpress調(diào)用文章列表的時(shí)候遞增序列號(hào)方法
標(biāo)簽： 代碼 網(wǎng)站制作
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
最新資訊
熱門推薦