list-style

列表样式主要是设置ul或ol前面的那个“列表符”的特性,包括:

  1. list-style-type:

用于设置列表样式的类型,比如原点(disc),圆圈(circle),阿拉伯数字(decimal),罗马数字,英文字母。

有了这个属性,对ul和ol来说,就没有差别了!

  1. list-style-image

用于设置列列表前面的小图标(图像),也就是说,用一个图片来代替上面的列表符。

如果设置了这项,则list-style-type就失效。

list-style-image: url(小图标的路径);

  1. list-style-position:

用于设置列表项目符的位置,只有两个值:outside(外面,默认),inside(里面)。指的是列表符,是放在li盒子的里面,还是放在li盒子的外面。

  1. list-style:上述3个属性的综合属性。

 

说明:

实际应用中,通常使用背景图像来代替“list-style-type”和“list-style-image”,更为常见

 

演示:

使用这个自定义图标   来实现一个隔行变色的列表,并要求该图标放在li盒子的内部。

猜你喜欢

转载自blog.csdn.net/qq_34608447/article/details/89299295