一、CSS列表样式类型
在HTML中，我们可以通过在<ol>标签内添加<li>标签来创建有序列表。而在CSS中，我们可以使用list-style-type属性来设置列表项的标志。
下面是list-style-type属性的常用值：
disc：默认值，实心圆。circle：空心圆。square：实心正方形。decimal：十进制数字（1, 2, 3，…）。lower-roman：小写罗马数字（i, ii, iii，…）。upper-roman：大写罗马数字（I, II, III，…）。lower-alpha：小写字母（a, b, c，…）。upper-alpha：大写字母（A, B, C，…）。
例如，我们可以使用以下CSS代码来将有序列表项设置为小写罗马数字：
<ol style="list-style-type: lower-roman;"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
效果如下：
- 第一项
- 第二项
- 第三项
二、自定义列表项标志
如果想要自定义有序列表项的标志，我们可以使用list-style-image属性来引用一个图片作为标志。
下面是使用list-style-image属性自定义列表项标志的基本步骤：
- 创建一个图片（格式为png、jpg或gif）。
- 上传图片到服务器上。
- 使用
list-style-image属性，将图片作为标志引入列表中。
例如，我们可以创建一个小图标（大小为16×16）作为列表项标志：
.custom-list {
list-style-image: url("icon.png");
}
然后我们可以这样使用HTML代码：
<ol class="custom-list"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
效果如下：
- 第一项
- 第二项
- 第三项
三、自定义标志形状
除了使用图片作为列表项标志外，我们还可以使用CSS3中的伪类::before和::after来自定义标志形状。
下面是自定义标志形状的基本步骤：
- 使用
::before或::after伪类，在列表项前面或后面插入一个<span>标签。 - 使用CSS样式将
<span>标签修饰成想要的标志形状。 - 使用CSS样式将列表项标志样式设为
none。
例如，我们可以使用以下CSS样式将有序列表项标志设为三角形：
.custom-list li::before {
content: "";
display: inline-block;
border-style: solid;
border-width: 0 0.3em 0.3em 0;
border-color: #000000;
margin-right: 0.5em;
transform: rotate(45deg);
width: 0.5em;
height: 0.5em;
}
然后我们可以这样使用HTML代码：
<ol class="custom-list"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol>
效果如下：
- 第一项
- 第二项
- 第三项
四、结语
通过list-style-type属性、list-style-image属性和::before、::after伪类，我们可以灵活地设置有序列表项的标志。
完整的CSS代码示例：
.custom-list {
list-style-type: none;
}
.custom-list li::before {
content: "";
display: inline-block;
border-style: solid;
border-width: 0 0.3em 0.3em 0;
border-color: #000000;
margin-right: 0.5em;
transform: rotate(45deg);
width: 0.5em;
height: 0.5em;
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/247774.html
微信扫一扫 
支付宝扫一扫 