经由过程设置list-style属性，能够自动在列表项的前面显现差别的标记，列表标记的设置有list-style-type和list-style-image两个属性。
list-style-type：将暗号和字母设置为列表项标记。
list-style-image：将图象设置为列表项标记。
list-style-type
list-style-type的情势以下
list-style-type：指定的标记值;
在lis-style - type上一连显现●或■等标记或许1 , 2 , 3…a，b，c…等根据递次显现的数字和字母等。
设置标记时
list-style-type: square;
假如输入上述代码，能够在开首显现实心方块的标记。
假如输入square部份的disc则显现实心圆标记，假如输入circle的话，会显现空心圆标记。
设置一连的数字或字母时
list-style-type: decimal;
假如输入上述代码的话，从列表的最最先按1 , 2 , 3…递次显现。
在decimal的部份输入lower-alpha的情况下，会以小写字母递次排序，输入upper-alpha，以大写字母递次排序，另有其他的递次排序，像是罗马数字以及希腊字母排序。
list-style-image
list-style-image的情势以下
list-style-image : url("图象途径");
首先将须要用到的图象文件上传到服务器上，输入图象的途径被指定为标记。
图象的途径能够是绝对途径也能够是相对途径。
list-style-type和list-style-image在同时设定的情况下，lis-style-image是优先的。
下面我们来看细致的示例
代码以下
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <ul class="list1"> <li>列表项目1</li> <li>列表项目2</li> <li>列表项目3</li> <li>列表项目4</li> <li>列表项目5</li> </ul> </body> </html>
我们首先来设置list-style-type属性
设置标记
CSS代码
.list1 {
list-style-type : circle;
}
在浏览器上显现结果以下：列表前有空心圆
设置一连的数字或字母
CSS代码
.list1 {
list-style-type : lower-alpha;
}
运转结果以下所示：列表前面按小写字母递次排列
我们下面就来运用list-style-image属性
HTML代码与上述雷同
CSS代码以下所示
.list1 {
list-style-image : url("img/d.jpg");
}
运转结果以下所示：列表前面有一个图象
以上就是CSS中list-style属性怎样运用的细致内容，更多请关注ki4网别的相干文章！
