有很多方法可以實(shí)現(xiàn)這一點(diǎn).這是一個(gè)：

>創(chuàng)建一個(gè)列表(ul或ol)并刪除列表樣式(list-style：none;)

>初始化計(jì)數(shù)器：counter-reset：section;

>增加每個(gè)列表項(xiàng)的計(jì)數(shù)器并使用偽元素(：before)打印：content：counter(section);反增量：部分;

>像你想要的那樣設(shè)置偽元素(：before)

ul {

counter-reset: section;

list-style: none;

}

li {

margin: 0 0 10px 0;

line-height: 40px;

}

li:before {

content: counter(section);

counter-increment: section;

display: inline-block;

width: 40px;

height: 40px;

margin: 0 20px 0 0;

border: 1px solid #ccc;

border-radius: 100%;

text-align: center;

}

• First item
• Second item

進(jìn)一步閱讀

演示

總結(jié)

以上是生活随笔為你收集整理的html带圈的数字号码,html – 带有数字的CSS圈子的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。