列表属性 总而言之，
就是干一件事，就是控制列表的图标
1 list-style-image
用于指定一个图片作为列表项前面的标记
默认值为none
可以设置一个图片的 url 作为标记图片
2 list-style-position
用于设置在什么位置显示列表项前面的标记
默认值为outside 外面（在li外部）
还可设置为inside 里面（在li内部）
【内 外 这边，自己打开开发者工具就能理解了】
3 list-style-type
用于设置列表项前面图标的类型
默认值为disc（小圆点） 其他值 circle 、square、decimal（数字）、none、low-alpha（小写字母）、upper-alpha（大写字母）、…
4 list-style
这是一个简写属性
list-style=list-style-image+list-style-position+list-style-type
其属性值可以省略几项
例如 ul { list-style : decimal inside }
小例子：：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表样式</title>
<style>
.list1 {
list-style-image: url("log.png");
list-style-position: inside;
/* image会覆盖掉type
但在企业级开发的时候，这两个属性一般都加上
因为，如果有的浏览器，不支持设置image的，，
这个浏览器，就会去读type的这个属性值
确保，不同情况，不会前边光秃秃的。
*/
list-style-type: square;/*作为image的备用方案替补*/
}
.list2 {
list-style-type: square;
}
/* ul通过样式也能变成ol */
.list3 {
list-style-type: upper-alpha;
}
/* .list {
list-style: inside upper-alpha ;
} */
</style>
</head>
<body>
<ul class="list">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ul class="list1">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ul class="list2">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ul class="list3">
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ul>
<ol>
<li>华为手机</li>
<li>华为笔记本</li>
<li>华为电视</li>
</ol>
</body>
</html>
398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
