css列表相关的属性
-
list-style-type, 设置列表前面的标识。常用可选值有:
- none 取消前面的标识。none decimal square circle
- decimal 前面的标识变为数字
- square 前面的标识变为正方形
- circle 前面的标识变为圆形
-
list-style-position, 设置前面标识是否在li里面。
-
自定义列表符号 list-style-image:url("../../logo.png"),**注意:**图片大小提前处理好,不能自定义。
-
复合属性 list-style 把上面的属性都用这一个属性来写:
list-style: none inside url("../../logo.png"),位置顺序没有要求。
<!DOCTYPE html>
<html lang="zn-CH">
<head>
<meta charset="UTF-8">
<title>Rock学前端</title>
<style>
ul {
/*list-style-type: decimal; !*可选值:none decimal square circle*!*/
/*list-style-position: inside; !*可选值: outside(默认值) inside*!*/
/*自定义符号*/
/*list-style-image: url("../../logo.png");*/
/*复合属性*/
list-style: outside decimal;
}
li {
background-color: deeppink;
/*height: 20px;*/
/*width: 100%;*/
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>Rock</li>
<li>洛克</li>
<li>前端</li>
</ul>
</div>
</body>
</html>