一、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
2
3
注意：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>
1653
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
