CSS3学习教程，从入门到精通， CSS3 列表控制详解语法知识点及案例代码（24）

CSS3 列表控制详解

CSS 列表控制的语法知识点及案例代码的详细说明，包括 list-style-type、list-style-image、list-style-position 和 list-style 的用法。

1. list-style-type 属性

list-style-type 属性用于设置列表项标记的类型。

语法

list-style-type: value;

常用值

none：无标记
disc：实心圆点（默认值）
circle：空心圆圈
square：实心方块
decimal：数字 1, 2, 3, 4…
decimal-leading-zero：数字 01, 02, 03, 04…
lower-roman：小写罗马数字 i, ii, iii, iv…
upper-roman：大写罗马数字 I, II, III, IV…
lower-alpha：小写字母 a, b, c, d…
upper-alpha：大写字母 A, B, C, D…
lower-greek：小写希腊字母 α, β, γ…
lower-latin：小写拉丁字母 (等同于 lower-alpha)
upper-latin：大写拉丁字母 (等同于 upper-alpha)
armenian：亚美尼亚数字
georgian：乔治亚数字

示例代码

<!DOCTYPE html>
<html>
<head>
<style>ul.custom {list-style-type: square; /* 使用方块作为列表标记 */}ol.decimal-leading-zero {list-style-type: decimal-leading-zero; /* 使用前导零的数字 */}ol.roman {list-style-type: lower-roman; /* 使用小写罗马数字 */}
</style>
</head>
<body><h2>自定义列表样式</h2>
<ul class="custom"><li>项目一</li><li>项目二</li><li>项目三</li>
</ul><ol class="decimal-leading-zero"><li>第一步</li><li>第二步</li><li>第三步</li>
</ol><ol class="roman"><li>第一章</li><li>第二章</li><li>第三章</li>
</ol></body>
</html>

2. list-style-image 属性

list-style-image 属性用于使用图像作为列表项标记。

语法

list-style-image: none|url|initial|inherit;

属性值

none：默认值，不使用图像
url：图像的路径
initial：设置为默认值
inherit：从父元素继承

示例代码

<!DOCTYPE html>
<html>
<head>
<style>ul.image-marker {list-style-image: url('https://via.placeholder.com/15x15'); /* 使用占位图片作为标记 */}ul.image-marker-fallback {/* 先尝试使用图片，如果图片不可用则使用方块 */list-style-type: square;list-style-image: url('nonexistent.png');}
</style>
</head>
<body><h2>图像作为列表标记</h2>
<ul class="image-marker"><li>带图片标记的项目一</li><li>带图片标记的项目二</li><li>带图片标记的项目三</li>
</ul><h2>带回退的图像标记</h2>
<ul class="image-marker-fallback"><li>如果图片不存在，会显示方块</li><li>第二个项目</li>
</ul></body>
</html>

3. list-style-position 属性

list-style-position 属性用于设置列表项标记的位置。

语法

list-style-position: inside|outside|initial|inherit;

属性值

outside：默认值，标记位于列表项内容之外
inside：标记位于列表项内容之内
initial：设置为默认值
inherit：从父元素继承

示例代码

<!DOCTYPE html>
<html>
<head>
<style>ul.outside {list-style-position: outside; /* 默认值，标记在内容外 */border: 1px solid #ccc;width: 200px;}ul.inside {list-style-position: inside; /* 标记在内容内 */border: 1px solid #ccc;width: 200px;}li {background-color: #f8f8f8;margin: 5px 0;}
</style>
</head>
<body><h2>标记位置对比</h2><h3>outside (默认)</h3>
<ul class="outside"><li>列表项目一 - 标记在边框外</li><li>列表项目二 - 文本对齐整齐</li>
</ul><h3>inside</h3>
<ul class="inside"><li>列表项目一 - 标记在边框内</li><li>列表项目二 - 文本缩进与标记对齐</li>
</ul></body>
</html>

4. list-style 简写属性

list-style 属性是上述所有列表样式属性的简写形式。

语法

list-style: list-style-type list-style-position list-style-image;

使用说明

可以按任意顺序指定值
可以省略一个或多个值，未指定的值将使用默认值
推荐顺序：type position image

示例代码

<!DOCTYPE html>
<html>
<head>
<style>ul.custom-shorthand {/* 使用简写属性设置列表样式 */list-style: square inside url('https://via.placeholder.com/15x15');width: 250px;border: 1px solid #ddd;padding: 10px;}ul.partial-shorthand {/* 只指定部分属性 */list-style: lower-alpha outside;}ul.reset {/* 重置列表样式 */list-style: none;padding-left: 0;}
</style>
</head>
<body><h2>list-style 简写属性</h2><ul class="custom-shorthand"><li>使用简写属性设置的列表项</li><li>同时指定了类型、位置和图像</li><li>图像优先显示，如果不可用则显示方块</li>
</ul><ul class="partial-shorthand"><li>只指定了类型和位置</li><li>使用小写字母标记</li><li>标记在内容外部</li>
</ul><h3>重置列表样式</h3>
<ul class="reset"><li>没有标记的列表</li><li>常用于导航菜单</li>
</ul></body>
</html>

5. 高级应用案例

自定义计数器列表

<!DOCTYPE html>
<html>
<head>
<style>/* 自定义计数器样式 */ol.custom-counter {counter-reset: section; /* 初始化计数器 */list-style-type: none; /* 移除默认标记 */padding-left: 0;}ol.custom-counter li {counter-increment: section; /* 递增计数器 */margin-bottom: 10px;position: relative;padding-left: 30px;}ol.custom-counter li::before {/* 使用伪元素显示自定义计数器 */content: counter(section) ". "; /* 显示计数器值 */position: absolute;left: 0;width: 25px;height: 25px;background-color: #4CAF50;color: white;text-align: center;line-height: 25px;border-radius: 50%;}/* 多级嵌套计数器 */ol.nested-counter {counter-reset: chapter;list-style-type: none;}ol.nested-counter > li {counter-increment: chapter;counter-reset: section;}ol.nested-counter > li::before {content: counter(chapter) ". ";font-weight: bold;}ol.nested-counter ol {list-style-type: none;counter-reset: section;padding-left: 20px;}ol.nested-counter ol li {counter-increment: section;}ol.nested-counter ol li::before {content: counter(chapter) "." counter(section) " ";}
</style>
</head>
<body><h2>自定义计数器列表</h2>
<ol class="custom-counter"><li>第一个项目</li><li>第二个项目</li><li>第三个项目</li>
</ol><h2>嵌套计数器</h2>
<ol class="nested-counter"><li>第一章<ol><li>第一节</li><li>第二节</li></ol></li><li>第二章<ol><li>第一节</li><li>第二节</li></ol></li>
</ol></body>
</html>

水平导航菜单

<!DOCTYPE html>
<html>
<head>
<style>/* 将列表转换为水平导航菜单 */ul.horizontal-nav {list-style-type: none; /* 移除标记 */margin: 0;padding: 0;overflow: hidden;background-color: #333;}ul.horizontal-nav li {float: left; /* 使列表项水平排列 */}ul.horizontal-nav li a {display: block; /* 使整个区域可点击 */color: white;text-align: center;padding: 14px 16px;text-decoration: none;}ul.horizontal-nav li a:hover {background-color: #111;}/* 当前活动项 */ul.horizontal-nav li.active {background-color: #4CAF50;}/* 响应式设计 - 小屏幕时垂直堆叠 */@media screen and (max-width: 600px) {ul.horizontal-nav li {float: none;}}
</style>
</head>
<body><h2>水平导航菜单</h2>
<ul class="horizontal-nav"><li><a href="#home">首页</a></li><li><a href="#news">新闻</a></li><li class="active"><a href="#contact">联系</a></li><li><a href="#about">关于</a></li>
</ul></body>
</html>

总结

CSS3 提供了强大的列表样式控制能力，主要包括：

list-style-type - 控制列表标记的类型
list-style-image - 使用自定义图像作为列表标记
list-style-position - 控制标记的位置（内部或外部）
list-style - 上述属性的简写形式

通过组合这些属性和其他CSS技术（如伪元素、计数器等），可以创建高度定制化的列表样式，满足各种设计需求。

CSS3 列表控制开发案例集

下面提供5个实际开发中常用的列表控制案例，每个案例都有详细注释和实际应用场景说明。

案例1：带图标的垂直导航菜单

<!DOCTYPE html>
<html>
<head>
<style>/* 垂直导航菜单样式 */.icon-nav {width: 200px;list-style: none; /* 移除默认列表样式 */padding: 0;margin: 0;font-family: Arial, sans-serif;border: 1px solid #e1e1e1;border-radius: 4px;overflow: hidden; /* 隐藏溢出部分 */}.icon-nav li {border-bottom: 1px solid #e1e1e1;}.icon-nav li:last-child {border-bottom: none; /* 最后一个项目无下边框 */}.icon-nav a {display: flex; /* 使用flex布局对齐图标和文本 */align-items: center;padding: 12px 15px;text-decoration: none;color: #333;transition: all 0.3s ease; /* 添加过渡效果 */}.icon-nav a:hover {background-color: #f5f5f5;color: #0066cc;}.icon-nav .icon {width: 20px;height: 20px;margin-right: 10px;background-size: contain;background-repeat: no-repeat;}/* 为每个菜单项设置不同的图标 */.icon-home { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>'); }.icon-news { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>'); }.icon-contact { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'); }.icon-about { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'); }/* 悬停时改变图标颜色 */.icon-nav a:hover .icon {filter: invert(39%) sepia(90%) saturate(2000%) hue-rotate(190deg) brightness(90%) contrast(90%);}
</style>
</head>
<body><h3>带图标的垂直导航菜单</h3>
<ul class="icon-nav"><li><a href="#"><span class="icon icon-home"></span>首页</a></li><li><a href="#"><span class="icon icon-news"></span>新闻中心</a></li><li><a href="#"><span class="icon icon-contact"></span>联系我们</a></li><li><a href="#"><span class="icon icon-about"></span>关于我们</a></li>
</ul></body>
</html>

应用场景：后台管理系统侧边栏、网站主导航

案例2：步骤指示器

<!DOCTYPE html>
<html>
<head>
<style>/* 步骤指示器样式 */.step-indicator {list-style: none;padding: 0;margin: 30px 0;display: flex;justify-content: space-between;counter-reset: step-counter; /* 初始化计数器 */}.step-indicator li {flex: 1;position: relative;text-align: center;font-size: 14px;color: #999;}/* 步骤编号 */.step-indicator li::before {counter-increment: step-counter; /* 递增计数器 */content: counter(step-counter); /* 显示计数器值 */display: block;width: 30px;height: 30px;line-height: 30px;margin: 0 auto 10px;border-radius: 50%;background-color: #e0e0e0;color: #999;font-weight: bold;}/* 连接线 */.step-indicator li::after {content: '';position: absolute;top: 15px;left: -50%;width: 100%;height: 2px;background-color: #e0e0e0;z-index: -1;}/* 第一个项目不需要连接线 */.step-indicator li:first-child::after {display: none;}/* 当前步骤样式 */.step-indicator li.active {color: #4285f4;}.step-indicator li.active::before {background-color: #4285f4;color: white;}/* 已完成步骤样式 */.step-indicator li.completed {color: #34a853;}.step-indicator li.completed::before {background-color: #34a853;color: white;content: '✓'; /* 使用对勾代替数字 */}.step-indicator li.completed::after {background-color: #34a853;}
</style>
</head>
<body><h3>订单流程步骤指示器</h3>
<ul class="step-indicator"><li class="completed">选择商品</li><li class="completed">填写信息</li><li class="active">支付订单</li><li>等待发货</li><li>完成评价</li>
</ul></body>
</html>

应用场景：电商订单流程、多步骤表单、注册流程

案例3：新闻资讯列表

<!DOCTYPE html>
<html>
<head>
<style>/* 新闻列表样式 */.news-list {list-style: none;padding: 0;max-width: 800px;margin: 0 auto;font-family: 'Helvetica Neue', Arial, sans-serif;}.news-item {display: flex;padding: 20px 0;border-bottom: 1px solid #eee;}.news-item:last-child {border-bottom: none;}.news-date {flex: 0 0 100px;text-align: center;margin-right: 20px;}.news-day {font-size: 28px;font-weight: bold;color: #4285f4;display: block;line-height: 1;}.news-month {font-size: 14px;color: #666;text-transform: uppercase;display: block;}.news-content {flex: 1;}.news-title {font-size: 18px;margin: 0 0 8px 0;color: #333;}.news-title a {color: inherit;text-decoration: none;transition: color 0.2s;}.news-title a:hover {color: #4285f4;}.news-summary {font-size: 14px;color: #666;line-height: 1.5;margin: 0 0 10px 0;}.news-meta {font-size: 12px;color: #999;}.news-meta span {margin-right: 15px;}.news-meta .category {color: #34a853;font-weight: bold;}/* 响应式设计 */@media (max-width: 600px) {.news-item {flex-direction: column;}.news-date {display: flex;align-items: center;margin-bottom: 10px;}.news-day {margin-right: 10px;font-size: 24px;}.news-month {font-size: 12px;}}
</style>
</head>
<body><h3>新闻资讯列表</h3>
<ul class="news-list"><li class="news-item"><div class="news-date"><span class="news-day">15</span><span class="news-month">Jun</span></div><div class="news-content"><h4 class="news-title"><a href="#">公司发布新一代人工智能产品</a></h4><p class="news-summary">我们很高兴地宣布推出全新AI解决方案，该产品将彻底改变企业工作流程...</p><div class="news-meta"><span class="category">公司动态</span><span>作者: 张经理</span><span>阅读: 1245</span></div></div></li><li class="news-item"><div class="news-date"><span class="news-day">08</span><span class="news-month">Jun</span></div><div class="news-content"><h4 class="news-title"><a href="#">2023年技术峰会在上海成功举办</a></h4><p class="news-summary">为期三天的技术峰会吸引了来自全球的2000多名开发者参与，共同探讨前沿技术发展趋势...</p><div class="news-meta"><span class="category">行业资讯</span><span>作者: 李编辑</span><span>阅读: 892</span></div></div></li><li class="news-item"><div class="news-date"><span class="news-day">01</span><span class="news-month">Jun</span></div><div class="news-content"><h4 class="news-title"><a href="#">夏季促销活动即将开始</a></h4><p class="news-summary">为庆祝公司成立10周年，我们将在6月10日至20日期间推出全场商品8折优惠...</p><div class="news-meta"><span class="category">促销活动</span><span>作者: 王主管</span><span>阅读: 1567</span></div></div></li>
</ul></body>
</html>

应用场景：企业新闻页面、博客文章列表、资讯中心

案例4：产品功能列表

<!DOCTYPE html>
<html>
<head>
<style>/* 产品功能列表样式 */.feature-list {list-style: none;padding: 0;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 30px;margin: 40px 0;}.feature-item {background: white;border-radius: 8px;box-shadow: 0 5px 15px rgba(0,0,0,0.05);overflow: hidden;transition: transform 0.3s, box-shadow 0.3s;}.feature-item:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.1);}.feature-icon {height: 80px;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #4285f4, #34a853);}.feature-icon svg {width: 40px;height: 40px;fill: white;}.feature-content {padding: 25px;}.feature-title {font-size: 18px;margin: 0 0 15px 0;color: #333;}.feature-desc {font-size: 14px;line-height: 1.6;color: #666;margin: 0;}/* 不同功能项使用不同颜色 */.feature-item:nth-child(2) .feature-icon {background: linear-gradient(135deg, #ea4335, #fbbc05);}.feature-item:nth-child(3) .feature-icon {background: linear-gradient(135deg, #34a853, #4285f4);}.feature-item:nth-child(4) .feature-icon {background: linear-gradient(135deg, #fbbc05, #ea4335);}/* 响应式设计 */@media (max-width: 768px) {.feature-list {grid-template-columns: 1fr;}}
</style>
</head>
<body><h3>产品核心功能</h3>
<ul class="feature-list"><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"></path></svg></div><div class="feature-content"><h4 class="feature-title">安全可靠</h4><p class="feature-desc">采用银行级加密技术，确保您的数据安全无忧。多重备份机制，99.99%的服务可用性保证。</p></div></li><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div><div class="feature-content"><h4 class="feature-title">极速性能</h4><p class="feature-desc">全球CDN加速，毫秒级响应。优化的算法架构，比传统方案快3倍以上。</p></div></li><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div><div class="feature-content"><h4 class="feature-title">团队协作</h4><p class="feature-desc">实时多人协作编辑，权限精细控制。历史版本追溯，随时恢复任意版本。</p></div></li><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path></svg></div><div class="feature-content"><h4 class="feature-title">智能分析</h4><p class="feature-desc">内置AI分析引擎，自动生成可视化报表。预测趋势，辅助决策。</p></div></li>
</ul></body>
</html>

应用场景：产品介绍页面、服务特色展示、解决方案功能点

案例5：带复选框的任务列表

<!DOCTYPE html>
<html>
<head>
<style>/* 任务列表样式 */.task-list {list-style: none;padding: 0;max-width: 600px;margin: 30px auto;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}.task-item {display: flex;align-items: center;padding: 12px 15px;background: white;border-radius: 6px;margin-bottom: 10px;box-shadow: 0 2px 4px rgba(0,0,0,0.05);transition: all 0.3s ease;}.task-item:hover {box-shadow: 0 4px 8px rgba(0,0,0,0.1);transform: translateY(-2px);}/* 自定义复选框样式 */.task-checkbox {position: relative;margin-right: 15px;}.task-checkbox input[type="checkbox"] {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}.checkmark {position: relative;display: inline-block;width: 20px;height: 20px;background-color: #f5f5f5;border: 2px solid #ddd;border-radius: 4px;transition: all 0.2s;}.task-checkbox input:checked ~ .checkmark {background-color: #34a853;border-color: #34a853;}/* 对勾图标 */.checkmark:after {content: "";position: absolute;display: none;left: 6px;top: 2px;width: 5px;height: 10px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);}.task-checkbox input:checked ~ .checkmark:after {display: block;}.task-content {flex: 1;}.task-title {font-weight: 500;margin: 0 0 3px 0;color: #333;}.task-desc {font-size: 13px;color: #777;margin: 0;}/* 已完成任务样式 */.task-item.completed .task-title {color: #999;text-decoration: line-through;}.task-item.completed .task-desc {color: #bbb;}/* 优先级标签 */.task-priority {font-size: 12px;padding: 3px 8px;border-radius: 10px;margin-left: 15px;font-weight: bold;}.priority-high {background-color: #fce8e6;color: #d93025;}.priority-medium {background-color: #fef7e0;color: #f9ab00;}.priority-low {background-color: #e6f4ea;color: #34a853;}/* 截止日期 */.task-due {font-size: 12px;color: #777;margin-left: 15px;white-space: nowrap;}.task-due.overdue {color: #d93025;font-weight: bold;}
</style>
</head>
<body><h3>任务管理列表</h3>
<ul class="task-list"><li class="task-item"><label class="task-checkbox"><input type="checkbox" checked><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">完成项目需求文档</h4><p class="task-desc">整理客户需求并编写详细的功能规格说明书</p></div><span class="task-priority priority-high">高优先级</span><span class="task-due">今天</span></li><li class="task-item completed"><label class="task-checkbox"><input type="checkbox" checked><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">团队周例会</h4><p class="task-desc">讨论项目进度和下周工作计划</p></div><span class="task-priority priority-medium">中优先级</span><span class="task-due">周一</span></li><li class="task-item"><label class="task-checkbox"><input type="checkbox"><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">UI设计评审</h4><p class="task-desc">与设计团队讨论新版界面设计方案</p></div><span class="task-priority priority-medium">中优先级</span><span class="task-due">周三</span></li><li class="task-item"><label class="task-checkbox"><input type="checkbox"><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">学习新技术</h4><p class="task-desc">完成React新特性学习并写demo</p></div><span class="task-priority priority-low">低优先级</span><span class="task-due overdue">上周五</span></li>
</ul></body>
</html>

应用场景：任务管理系统、待办事项应用、项目管理工具

这些案例涵盖了从简单到复杂的各种列表应用场景，展示了CSS3列表控制的强大功能和灵活性。您可以根据实际需求进行调整和扩展。

CSS3学习教程，从入门到精通， CSS3 列表控制详解语法知识点及案例代码（24）

CSS3 列表控制详解

1. list-style-type 属性

语法

常用值

示例代码

2. list-style-image 属性

语法

属性值

示例代码

3. list-style-position 属性

语法

属性值

示例代码

4. list-style 简写属性

语法

使用说明

示例代码

5. 高级应用案例

自定义计数器列表

水平导航菜单

总结

CSS3 列表控制开发案例集

案例1：带图标的垂直导航菜单

案例2：步骤指示器

案例3：新闻资讯列表

案例4：产品功能列表

案例5：带复选框的任务列表

相关资讯

热文排行

最新新闻

推荐新闻

热搜词