当前位置: 代码迷 >> 综合 >> list-style
  详细解决方案

list-style

热度:72   发布时间:2023-10-11 04:22:49.0

列表样式主要是设置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盒子的内部。