六、css列表相关的属性

135 阅读1分钟

css列表相关的属性

  1. list-style-type, 设置列表前面的标识。常用可选值有:

    • none 取消前面的标识。none decimal square circle
    • decimal 前面的标识变为数字
    • square 前面的标识变为正方形
    • circle 前面的标识变为圆形
  2. list-style-position, 设置前面标识是否在li里面。

  3. 自定义列表符号 list-style-image:url("../../logo.png"),**注意:**图片大小提前处理好,不能自定义。

  4. 复合属性 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>