CSS（七）CSS列表控制

龙猫里的小梅啊2026-05-05 11:05

CSS列表控制

核心知识点

HTML无序列表<ul>、有序列表<ol>是导航栏、菜单、图文列表的核心结构，CSS列表控制属性用于清除浏览器默认样式、自定义列表标记，是制作导航菜单的第一步。

属性	作用	常用值与说明
`list-style-type`	列表项标记类型	`none`（无标记，导航栏必用）、`disc`（实心圆，默认）、`decimal`（数字）
`list-style-image`	自定义列表标记图片	语法：`list-style-image: url(图片路径);`，可替换默认圆点为主题图标
`list-style-position`	标记定位方式	`outside`（默认，标记在文本外部）、`inside`（标记在文本内部）
`list-style`	列表样式简写	语法：`list-style: type position image;`，例：`list-style: none;` 直接清除所有默认样式

配套案例练习：导航栏列表基础结构与样式重置

需求：制作导航栏的HTML列表结构，清除浏览器默认的列表样式

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表控制练习</title>
    <style>
        /* 全局重置：清除列表默认内外边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 导航容器 */
        .nav-container {
            width: 1200px;
            margin: 0 auto;
            background-color: #2c7a7b; /* 文旅主题自然绿 */
        }
        /* 主列表样式 */
        .main-nav {
            /* 核心：清除列表默认圆点标记 */
            list-style: none;
        }
        /* 菜单项基础样式 */
        .main-nav li {
            padding: 15px 20px;
            color: #fff;
            font-family: "微软雅黑", sans-serif;
        }
    </style>
</head>
<body>
    <nav class="nav-container">
        <ul class="main-nav">
            <li>首页</li>
            <li>景点介绍</li>
            <li>特色美食</li>
            <li>文旅活动</li>
            <li>交通指南</li>
            <li>联系我们</li>
        </ul>
    </nav>
</body>
</html>

案例说明：通过list-style: none清除了列表默认的圆点标记，消除了浏览器默认的padding和margin，是制作所有导航菜单的前置基础，所有导航均基于无序列表结构实现。