html 列表样式-使用 css_CSS 列表样式的 h5 无序序列

2023-08-26 0 9,981 百度已收录

我们知道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。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 html html 列表样式-使用 css_CSS 列表样式的 h5 无序序列 https://www.wkzy.net/game/151781.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务