用HTML语义化标签ol+li构建步骤条，配合CSS状态类与ARIA属性实现可访问、响应式流程导航，无需JS即可保证语义清晰、屏幕阅读器友好及移动端适配。

直接用 HTML + CSS 就能做出美观、语义清晰、可访问的步骤条，不需要 JS 也能表达流程状态；但很多人一上来就套 Bootstrap 或写一堆无意义的 div，结果样式错乱、屏幕阅读器读不出来、移动端排版崩坏。

用 ol 而不是 div 或 ul 写步骤结构

步骤有天然顺序，ol（有序列表）是唯一语义正确的选择。浏览器和读屏软件会自动播报“第1步、第2步…”；用 ul 或 div 则丢失这一层含义，还可能被搜索引擎降权。

• ol 的每个 li 代表一个步骤节点，别在里面塞 span 或 div 当“步骤容器”
• 不要给 ol 设 counter-reset 或手动写 “Step 1:”，让浏览器自增即可
• 如果某步不可点击，就别包 a；若可跳转，a 必须带有效 href，不能是 # 或空字符串

用 CSS 控制步骤状态：active / current / done

靠 class 区分状态比用伪类更可控，也方便后续加 JS 动态切换。关键不是画圆圈，而是让视觉层次和语义一致。

• .active 表示已通过（已完成），通常用实心圆 + 灰色文字 + 连线连到下一步
• .current 表示当前所在步，用高亮色边框/背景，文字加粗，连线截止于此
• 未开始的步骤（如 li 没加 class）默认为“待办”，用空心圆 + 浅灰文字
• 连线建议用 ::before 在 li:not(:last-child) 上画，别用绝对定位或额外元素，否则响应式时容易错位

响应式下避免文字换行压垮步骤条

小屏上横向步骤条必然拥挤，硬撑会导致文字折行、圆圈错位、连线断裂——这不是样式问题，是布局逻辑问题。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• 用 flex 布局 ol，设 flex-wrap: wrap，但只在断点后启用；桌面端保持 flex-nowrap
• 每步文字限制在 1 行：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
• 移动端优先展示步骤编号 + 图标，文字收进 title 属性或 tooltip，不强行显示全称
• 千万别用 font-size: clamp() 拼凑适配，它会让不同步的文字大小不一致，破坏节奏感

可访问性常被忽略的三个细节

步骤条不是装饰，用户可能靠键盘 Tab 或读屏器操作，以下三点不处理，等于没做完整：

• 每个 li 加 role="step"，当前步额外加 aria-current="step"
• 连线元素（如 ::before）必须设 aria-hidden="true"，否则读屏器会念“横线”
• 如果步骤支持跳转，确保 a 的 href 是真实页面路径，不是 javascript:void(0) —— 否则键盘用户无法 Enter 触发

最复杂的不是画圆圈或连线，而是让「状态 class」、「ARIA 属性」、「CSS 布局行为」三者始终同步；改一个 class 忘了删 ARIA，或 flex 换行后连线没重算宽度，都会导致体验断裂。动手前先想清楚：这个步骤条是纯展示，还是承载导航功能？答案决定了你从哪一层开始写。