我们知道HTML中的列表可以分为无序列表、有序列表和定义列表。 在网页中经常可以看到无序列表的使用,比如导航栏菜单、新闻列表、商品分类、图片展示等,基本上都是通过无序列表来实现的。
在无序列表中,默认每个列表项后面都会有一个点符号,但是通常我们平常在网站上看到的列表样式上面一般都没有点符号,那么我们如何去掉这个默认的点符号呢?关于符号? 这些都可以通过 CSS 中的列表属性实现。
本节要讨论的 CSS 列表属性有以下四个:
列表样式类型
list-sytle-type属性用于设置列表项的标签类型,类似于HTML中列表标签中的type属性。
常见的values属性值如下:
例子:
以下是未添加任何样式的列表:
如果我们想删除列表后面的默认点,可以通过将 list-style-type 属性设置为 none 来实现:
ul{ list-style-type: none;}
在浏览器中的演示效果:
列表样式图像
list-style-image 属性用于用图像替换列表项标记。 但需要注意的一点是,如果我们设置了list-style-image属性,此时设置的list-sytle-type属性就不起作用了。 通常,为了避免个别浏览器不支持list-style-image属性,我们会设置一个list-style-type属性来代替。
例子:
例如我们将前面的列表项的标签设置为图片(图片大小为50x50),属性值为图片路径:
ul{ list-style-image: url(./flower.png);}
在浏览器中的演示效果:
列表样式位置
list-style-position 属性用于设置列表项标记的放置位置。
属性值如下:
例子:
例如,我们可以设置两个不同的列表,并将list-style-position属性设置为outside和inside进行比较:
CSS学习(9xkd.com)
项目 1、项目 2、项目 3、项目 4、项目 5、项目 1、项目 2、项目 3、项目 4、项目 5
CSS样式代码:
.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( ./花.png):
ul{ list-style:square inside url(./flower.png);}
在浏览器中的演示效果:
在本节中,我们讨论了 CSS 中的几种列表样式。 通常,我们用的最多的是如何去掉列表项的默认标记html 列表样式html 列表样式,即list-style-type: none。