HTML+CSS+JavaScript复习笔记持更（八）——CSS3常用属性之列表_<a href="javascript:;" @click="exchange" style="ma-CSDN博客

本文链接：https://blog.csdn.net/weixin_43781426/article/details/105890430

列表属性

之前已经介绍过了列表标签。主要有有序列表和无序列表，为了更好地控制这两种列表，CSS还提供了这两种列表的样式设置。

list-style（简写属性，把所有列表的属性设置写到一个声明中）
list-style-image（把图像设置为列表项标志）
list-style-position（设置列表项标志的位置）
list-style-type（设置列表项标志的类型）

属性值说明：
list-style，作为缩写，可以直接接后面所有的属性值，也可以用none，表示去除所有列表样式。
list-style-image，常接url引入图片地址

list-style-position，可能的值如下：

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

list-style-type，可能的值很多，均为CSS中已经存在的列表标记，可以在需要时再查询，引入图片作为标记时，此项因为none

具体案例

我们可以写一个具体的导航栏+列表项目的实例，话不多说，直接上代码

语法格式：

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    <!-- 创建最外层的一个大盒子 -->
    <div class="box">
        <!-- 最上面放一个标题 -->
        <h1>欢迎来到我的小店</h1>
        <!-- 导航的盒子 -->
        <div class="nav">
            <!-- 创建一个盒子，作为导航里的一级列表 -->
            <div class="top">
                <!-- 使用无序列表 -->
                <ul>
                    <li>家用电器</li>
                    <li>手机/运营商/数码</li>
                    <li>电脑/办公  </li>
                    <li>家居/家具/家装/厨具</li>
                    <li>男装/女装/童装/内衣</li>
                    <li>美妆/个护清洁/宠物</li>
                </ul>
            </div>
            <!-- 创建一个盒子，存放二级列表 -->
            <div class="bottom1">
                <ul>
                    <li>电视</li>
                    <li>空调</li>
                    <li>洗衣机</li>
                    <li>冰箱</li>
                    <li>厨卫大电</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
ul{
    /* 列表样式缩写，none表示去除所有样式 */
    list-style: none;
}
.box{
    width: 100%;
    background-color: skyblue;
}
h1{
    width: 20%;
    margin: 0 auto;
}
.nav{
    margin-left: 100px;
    width: 1000px;
    height: 1000px;
}
.top{
    /* 让一级标签浮动,使得二级标签能排列在旁边 */
    height: 300px;
    float: left;
    background-color:rgb(219, 217, 217);
    line-height: 30px;
}
.bottom1{
    width: 400px;
    height: 300px;
    background-color: rgb(190, 196, 199);
    text-align: center;
    line-height: 30px;
}
.bottom1 li{
    /* 二级列表项设置图标，用url引入地址 */
    list-style-image: url(./icon/car.png);
    /* 引入了图标，那就不需要css中自带的type */
    list-style-type: none;
    /* 标记放进文本内，环绕文本跟标记对齐 */
    list-style-position: inside;
}