CSS插入序號的方法有很多種，下面我們將介紹其中兩種常用的方法。
方法一：使用絕對定位和偽元素
使用絕對定位和偽元素可以將CSS樣式與HTML元素中的序號分離開來，從而實現(xiàn)在網(wǎng)頁中的不同位置插入不同的序號。
示例代碼：
.number-container {
position: relative;
.number {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 16px;
color: #fff;
.number:before,
.number:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #007bff;
border-radius: 50%;
transform: rotate(-45deg);
.number:after {
left: 50%;
transform: translateX(-50%);
在上面的代碼中，我們使用HTML中的
- 和
- 元素來創(chuàng)建列表，并使用CSS中的.number-container元素來創(chuàng)建包含序號的div元素。在.number-container元素中，我們使用CSS中的.number元素來創(chuàng)建帶有序號的文本，并使用絕對定位來將其放在列表的不同位置。
通過這種方式，我們可以在網(wǎng)頁的不同位置插入不同的序號，從而實現(xiàn)在網(wǎng)頁中的不同部分展示不同的內(nèi)容。
方法二：使用標簽和屬性
使用標簽和屬性可以將CSS樣式與HTML元素中的序號組合在一起，實現(xiàn)在網(wǎng)頁中同時插入多個序號。
示例代碼：
- 1
- 2
- 3
- 4
- 5
.number-container {
position: relative;
.number {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 16px;
color: #fff;
.number:before,
.number:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 20px;
height: 20px;
background-color: #007bff;
border-radius: 50%;
transform: rotate(-45deg);
.number:after {
left: 50%;
transform: translateX(-50%);