欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS:列表样式(设置列表项的标志图案/位置)_html/css_WEB-ITnose

程序员文章站 2022-03-16 21:03:19
...
通过CSS 列表属性可以放置、改变列表项标志,或者将图像作为列表项标志。

代码整理自w3school:http://www.w3school.com.cn

效果图:

示例代码:

CSS 列表样式

CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。


(一)设置列表的列表项标志:list-style-type

  • 苹果
  • 橘子
  • 香蕉

(二)设置自定义图标为列表的列表项标志:list-style-image

  • 苹果
  • 橘子
  • 香蕉

(三)设置列表项标志的位置:list-style-position

(1)inside

  • 苹果
  • 橘子
  • 香蕉

(2)outside

  • 苹果
  • 橘子
  • 香蕉

(四)将以上3个列表样式属性合并为一个属性:list-style

  • 苹果
  • 橘子
  • 香蕉