核心是用构建语义化步骤结构，CSS通过.done/.active等class控制圆点、连线及状态图标，JavaScript动态切换class实现进度更新，并兼顾ARIA属性与响应式适配。
用 HTML 列表标签实现步骤条（Step Progress Bar）的核心，是结合 <ol></ol> 或 <ul></ul> 结构 + CSS 控制视觉状态 + JavaScript 控制“当前步骤”切换。关键不在于标签本身有多复杂，而在于如何用语义化列表表达流程，并通过 class 动态标记“已完成”“进行中”“未开始”三类状态。
用有序列表构建语义化步骤结构
步骤有明确顺序，优先使用 <ol></ol>，每个步骤用 <li> 包裹。不要用 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：
- 给
.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元素，对索引的加 <code>done，等于的加active，大于的清空状态 class - 支持点击步骤标题跳转？可为每个
<li>添加data-step="2"，点击时直接设置currentStep = parseInt(...)并刷新
增强可用性与响应式细节
别只顾视觉效果，忽略基础体验：
- 给每个
<li>加role="listitem"和aria-current="step"（仅 active 步骤），屏幕阅读器能识别当前进度 - 小屏下可将连线改为竖排，或隐藏连线只保留圆点+文字，用
@media (max-width: 480px)调整::after宽度和定位 - 避免用
display: none隐藏未完成步骤——会破坏语义和键盘导航；改用opacity: 0.5或视觉弱化
