免费教程
使用 list-style-position 属性可以设置在何处放置列表项前的标记……
Web前端教程
Web前端入门教程:CSS列表样式(2)
来源:易牛云朗沃
  |  
发布时间:2021-10-22 21:45
  |  
关键词:成都Web前端入门
  |  
阅读量:

2. list-style-position

使用 list-style-position 属性可以设置在何处放置列表项前的标记,属性的可选值如下:

成都Web前端入门

【示例】使用 list-style-position 属性设置列表项前标记的位置:

成都Web前端入门

运行结果如下图所示:

成都Web前端入门

3. list-style-image

通过 list-style-image 属性可以将列表项前的标记替换为一个图像,属性的可选值如下:

成都Web前端入门

【示例】使用 list-style-image 属性将列表项前的标记替换为一个图像:

成都Web前端入门

运行结果如下图所示:

成都Web前端入门

4. list-style

list-style 属性是上述三个属性(list-style-type、list-style-position、list-style-image)的简写,使用 list-style 可以同时设置上面的三个属性,其语法格式如下:

list-style: list-style-type || list-style-position || list-style-image;

提示:在使用 list-style 属性时,需要按照上面的顺序来为参数赋值,只要遵守参数的顺序,即使忽略其中的一项或多项也是可以的,例如list-style: none;、list-style:circle inside;,被忽略的参数会设置为参数对应的默认值。

【示例】使用 list-style 属性来统一设置列表项的标记样式、位置和图像:

成都Web前端入门

运行结果如下图所示:

成都Web前端入门

点击知道更多编程知识

文章来源于网络