核心是用构建语义化步骤结构，CSS通过.done/.active等class控制圆点、连线及状态图标，JavaScript动态切换class实现进度更新，并兼顾ARIA属性与响应式适配。

用 HTML 列表标签实现步骤条（Step Progress Bar）的核心，是结合

或

结构 + CSS 控制视觉状态 + JavaScript 控制“当前步骤”切换。关键不在于标签本身有多复杂，而在于如何用语义化列表表达流程，并通过 class 动态标记“已完成”“进行中”“未开始”三类状态。

用有序列表构建语义化步骤结构

步骤有明确顺序，优先使用

，每个步骤用

包裹。不要用 div 模拟列表——这既不利于可访问性，也增加样式负担。

示例结构：

<ol class="step-bar">
<li class="step done">填写信息</li>
  <li class="step active">确认订单</li>
  <li class="step">支付完成</li>
  <li class="step">订单完成</li>
</ol>

其中 done、active、默认无 class（即待办）分别对应三种状态，CSS 通过这些 class 渲染不同样式。

用 CSS 绘制连接线与状态图标

步骤条通常包含步骤圆点 + 步骤间连线。纯 CSS 实现无需图片或 SVG：

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 给 .step 设置相对定位，内部用伪元素 ::before 绘制圆点（如 content: "" + border-radius: 50%）
• 给 .step:not(:last-child)::after 添加绝对定位的横线（模拟连线），宽度固定或根据间距计算
• 用 .step.done::before 显示对勾（可用 Unicode ✅ 或 background-image），.step.active::before 用高亮色填充圆点，.step::before 用浅灰描边

用 JavaScript 切换步骤状态

状态切换本质是更新 class：移除所有 done 和 active，再按当前步骤索引重新添加。

常见做法：

• 绑定按钮或事件（如“下一步”“上一步”），维护一个 currentStep 变量（从 0 开始）
• 遍历所有 .step 元素，对索引 的加 done，等于的加 active，大于的清空状态 class
• 支持点击步骤标题跳转？可为每个
• 添加 data-step="2"，点击时直接设置 currentStep = parseInt(...) 并刷新

增强可用性与响应式细节

别只顾视觉效果，忽略基础体验：

• 给每个
• 加 role="listitem" 和 aria-current="step"（仅 active 步骤），屏幕阅读器能识别当前进度
• 小屏下可将连线改为竖排，或隐藏连线只保留圆点+文字，用 @media (max-width: 480px) 调整 ::after 宽度和定位
• 避免用 display: none 隐藏未完成步骤——会破坏语义和键盘导航；改用 opacity: 0.5 或视觉弱化

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！