list-style-type属性、list-style-image属性、list-style-position属性、list-style复合属性的用法，背景图像定义项目符号/学习笔记
一、list-style-type属性在css中list-style-type属性可以用于控制列表项显示符号的类型/*使用该方法可以使用css来定义列表的type属性*/属性值描述属性值描述disc实心圆none不使用项目符号circle空心圆cjk-ideographic简单的表意数字square实心方块georgian传统的乔治亚编号lower-roman小写罗马数字upper-roman大写
一、list-style-type属性
在css中list-style-type属性可以用于控制列表项显示符号的类型
/*使用该方法可以使用css来定义列表的type属性*/
| 属性值 | 描述 | 属性值 | 描述 |
|---|---|---|---|
| disc | 实心圆 | none | 不使用项目符号 |
| circle | 空心圆 | cjk-ideographic | 简单的表意数字 |
| square | 实心方块 | georgian | 传统的乔治亚编号 |
| lower-roman | 小写罗马数字 | upper-roman | 大写罗马数字 |
……略
具体用法
<style>
ul{
list-style-type:cricle;
}
ol{
list-style-type:hebrew;
}
/*使用该方法可以使用css来定义列表的type属性*/
</style>
<body>
<h2>红色</h2>
<ul>
<li>大红</li>
<li>朱红</li>
<li>嫣红</li>
</ul>
<h2>蓝色</h2>
<ol>
<li>湖蓝</li>
<li>群青</li>
<li>普兰</li>
</ol>
</body>
注意：由于浏览器的解析不同，实际开发中不推荐使用list-style-type属性。
二、List-style-image属性
该属性用法同list-style-type一样，该属性能将各列表的项目符号设置成个性化的图像
具体用法
ul{
list-style-image:url(图标路径)
}
注意：1、list-style-image属性可以为各个列表设置项目图像。2、list-style-image对列表项目图像的控制能力不强一般不建议使用，通常使用<li>设置背景图像的方式实现列表项目图像。
三、list-style-position属性
在CSS中list-style-position属性可以用来控制列表项目符号的位置，取值有inside和outside两种，默认值为outside。用来分别控制取值位置。
具体用法
<style>
li{
border:2px solid #blue;
/*设置每个li的表框*/
}
ul{
list-style-position:inside;
/*设置取值范围*/
}
</style>
<body>
<h2>中秋节</h2>
<ul>
<li>中秋节，又称月夕、秋节</li>
<li>时在农历八月十五</li>
<li>始于唐朝初年，盛行于宋朝</li>
</ul>
<ul>
<li>端午节</li>
<li>除夕</li>
<li>清明节</li>
</ul>
</body>
四、list-style复合属性
css中可以使用list-style来综合的设置type/image/position等等属性。
语法格式：list-style:列表项目符号 列表项目符号位置 列表项目图像；
具体用法
<style>
ul{
list-style: circle inside url(photo.png);
/*复合属性*/
}
li{
border:2px solid;
}
</style>
使用list-style取值none还可以用于清除默认的列表项目符号。
五、背景图像定义列表项目符号
由于列表样式对列表项目图像的控制能力不强，所以实际工作中通常通过列表标签设置背景图像的方式来定义列表项目图像
如：background:url(photo.png) no-repeat left center;
具体用法
<html>
<head>
<title>背景图像定义列表项目符号</title>
<style>
dd{
list-style:none;
height:25px;
line-height:25px;
/*清除列表默认样式，设置高度，以及文字行高*/
background:url(图片.png) no-repeat left center;
/*设置列表的背景图片，使用该方法来定义列表项目符号*/
}
</style>
</head>
<body>
<h2>熊猫</h2>
<dl>
<dd>黑眼圈</dd>
<dd>圆滚滚</dd>
</dl>
</body>
</html>
//欢迎加我VX进群交流
vx账号：-Sep07
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
13
1- 0
已为社区贡献4条内容
所有评论(0)