八，列表的样式
2020-12-16 本文已影响0人
好多可乐
列表的样式：
- list-style-type：设置列表项目的外观，属性值：none，disc，circle，square（无序列表）decimal等（有序列表，见截图）
- list-style-position：列表符号的位置，属性值：inside（靠正文比较近，就是靠右），outside（靠正文比较远，就是靠左）
- list-style-image：把图像设置为列表项目的标记。属性值：url，none（设置了这个属性以后第一个属性将不再生效）
- list-style：简写属性，涵盖以上三个列表样式属性（如果第三个属性设置了，第一个属性就不再生效）
在这里插入图片描述
总结：
列表使用频率很高，经常用于菜单，规律性展示等应用场景
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<style type="text/css">
ul{
/* list-style-type: circle;
list-style-position: inside;
list-style-image: url("image/3.jpg");*/
list-style: circle url("image/3.jpg")
}
ol{
list-style-type: lower-alpha;
list-style-position: inside;
/*list-style-image: url("image/3.jpg");*/
}
</style>
</head>
<body>
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
<ol>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ol>
</body>
