直接用 html+css 可实现可用步骤条：语义化用 或 ，状态靠 active/current 类控制，css 用 flex 横向布局与伪元素画线，js 更新需同步 aria 属性和可访问性。
直接用 HTML + CSS 就能做出可用的步骤条，不需要框架或构建工具；关键在结构语义清晰、状态类名统一、CSS 横向对齐和视觉反馈明确。
用 <ol></ol> 或 <ul></ul> 构建步骤结构
步骤条本质是有序流程，<ol></ol> 更语义正确，但 <ul></ul> 也常见（尤其当后端动态生成时）。每个步骤用 <li>，状态靠 class 控制：
-
<li class="active">表示已完成（含圆圈+文字+连接线） -
<li class="current">表示当前进行中（通常圆圈高亮、文字加粗） -
<li>（无 class）表示未开始（灰阶、不可点击）
别用 <div> 套 <code><span></span> 模拟列表——屏幕阅读器无法识别流程顺序，SEO 和可访问性都会打折。
CSS 实现横向排列与状态样式
核心是让 <li> 水平铺开，并用伪元素画连接线。典型写法：
`.steps {
display: flex;
justify-content: space-between;
counter-reset: step;
}
.steps li {
position: relative;
flex: 1;
text-align: center;
}
.steps li::before {
content: counter(step);
counter-increment: step;
width: 28px;
height: 28px;
line-height: 28px;
border-radius: 50%;
background: #ccc;
color: #fff;
font-size: 14px;
display: inline-block;
}
.steps li.active::before,
.steps li.current::before {
background: #007bff;
}
.steps li.active::after {
content: '';
position: absolute;
top: 14px;
left: 100%;
width: 100%;
height: 2px;
background: #007bff;
}`
注意：flex: 1 让每步等宽自适应，::after 画的是“已完成”步骤右侧的连接线；“当前”步骤不画线，“未开始”步骤连线上也不显示。
JavaScript 动态更新步骤状态要谨慎
如果需要点击跳转或表单验证后推进，用 JS 切换 class 即可，但必须同步更新 DOM 状态和 ARIA 属性：
- 调用
goToStep(n)时，确保n是合法索引（0 ≤ n ） - 给当前
<li>加aria-current="step"，提升读屏体验 - 禁用未完成步骤的点击（
pointer-events: none），或加逻辑拦截，否则用户可能乱跳 - 不要只改 class，漏掉
tabindex或aria-disabled，键盘用户会卡住
纯静态步骤条（如文档导航）完全不用 JS；加交互前先问：这个步骤是否真需要用户主动触发？还是只是反映表单填写进度？后者更适合由表单验证逻辑驱动，而非手动调用 goToStep()。
最易被忽略的是响应式断点——小屏下横向步骤条必须折叠为垂直列表，且连接线要转为顶部/底部边框；另外，所有颜色需满足 WCAG 4.5:1 对比度，灰色圆圈配浅灰文字是常见翻车点。
