时间：2023-09-26 12:30:02 | 来源：网站运营
时间：2023-09-26 12:30:02 来源：网站运营
CSS 列表样式：我们知道在 HTML 中列表可以分为无序列表、有序列表、定义列表。在网页中经常可以看到无序列表的使用，例如像导航栏菜单、新闻列表、商品分类、图片展示等，基本都是通过无序列表来实现的。
在线咨询
list-sytle-type 属性用于设置列表项的标记的类型，和 HTML 中列表标签中的 type 属性类似。none，也就是用于去掉列表项的标记。list-style-type 属性设置为 none 来实现：ul{ list-style-type: none;}在浏览器中的演示效果：list-style-image 属性用于使用图像来替换列表项的标记。但有一点需要注意，如果我们设置了 list-style-image 属性，这个时候设置的 list-sytle-type 属性将不起作用。一般为了防止某些浏览器不支持 list-style-image 属性，我们会设置一个 list-style-type 属性来替代。ul{ list-style-image: url(./flower.png);}在浏览器中的演示效果：list-style-position 属性用于设置在何处放置列表项标记。list-style-position 属性设置为outside 和 inside 来进行对比：<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <ul class="ul1"> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> <li>第五项</li> </ul> <ul class="ul2"> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> <li>第五项</li> </ul> </body></html>.ul1{ list-style-position: inside;}.ul2{ list-style-position: outside;}在浏览器中的演示效果：list-style 属性是一个简写属性，是上述几个列表属性的简写形式，用于把所有列表的属性设置在一个声明中。list-style-type、list-style-position、list-style-image，也可以不设置其中某个属性，如果不设置则采用默认值。list-style-type 属性值为 square、list-style-position 属性值为 inside、list-style-image 属性值为 url(./flower.png)：ul{ list-style:square inside url(./flower.png);}在浏览器中的演示效果：list-style-type:none。关键词：样式
