list

2022-11-06 04:28| 来源: 网络整理| 查看: 265

一、list-style-type属性

在css中list-style-type属性可以用于控制列表项显示符号的类型

/*使用该方法可以使用css来定义列表的type属性*/ 属性值描述属性值描述disc实心圆none不使用项目符号circle空心圆cjk-ideographic简单的表意数字square实心方块georgian传统的乔治亚编号lower-roman小写罗马数字upper-roman大写罗马数字

……略

具体用法

ul{ list-style-type:cricle; } ol{ list-style-type:hebrew; } /*使用该方法可以使用css来定义列表的type属性*/ 红色大红朱红嫣红蓝色湖蓝群青普兰注意：由于浏览器的解析不同，实际开发中不推荐使用list-style-type属性。二、List-style-image属性

该属性用法同list-style-type一样，该属性能将各列表的项目符号设置成个性化的图像

具体用法

ul{ list-style-image:url(图标路径) }

注意：1、list-style-image属性可以为各个列表设置项目图像。2、list-style-image对列表项目图像的控制能力不强一般不建议使用，通常使用设置背景图像的方式实现列表项目图像。

三、list-style-position属性

在CSS中list-style-position属性可以用来控制列表项目符号的位置，取值有inside和outside两种，默认值为outside。用来分别控制取值位置。

具体用法

li{ border:2px solid #blue; /*设置每个li的表框*/ } ul{ list-style-position:inside; /*设置取值范围*/ } 中秋节中秋节，又称月夕、秋节时在农历八月十五始于唐朝初年，盛行于宋朝端午节除夕清明节四、list-style复合属性

css中可以使用list-style来综合的设置type/image/position等等属性。

语法格式：list-style:列表项目符号列表项目符号位置列表项目图像；

具体用法

ul{ list-style: circle inside url(photo.png); /*复合属性*/ } li{ border:2px solid; }

使用list-style取值none还可以用于清除默认的列表项目符号。

五、背景图像定义列表项目符号

由于列表样式对列表项目图像的控制能力不强，所以实际工作中通常通过列表标签设置背景图像的方式来定义列表项目图像

如：background:url(photo.png) no-repeat left center;

具体用法

背景图像定义列表项目符号 dd{ list-style:none; height:25px; line-height:25px; /*清除列表默认样式，设置高度，以及文字行高*/ background:url(图片.png) no-repeat left center; /*设置列表的背景图片，使用该方法来定义列表项目符号*/ } 熊猫黑眼圈圆滚滚 //欢迎加我VX进群交流 vx账号：-Sep07

【本文地址】

公司简介

联系我们