用ol搭建步骤条最语义化，li内用aria-current和aria-disabled标记状态，连接线用伪元素+transform居中，状态区分需叠加颜色/形状/图标，移动端注意touch-action、viewport限制及clamp字号。
步骤条的HTML结构怎么搭才不踩坑
用 ol（有序列表）是语义最合理的选择，比一堆 div 更利于可访问性和SEO。每个步骤用 li，里面放图标、标题和描述——但别直接塞 span 或 p 做状态标记，容易被屏幕阅读器误读。建议用 aria-current="step" 标记当前步，用 aria-disabled="true" 标记未激活步。
常见错误：把步骤写成横向 flex 容器后忘记设 flex-wrap: nowrap，小屏下直接溢出；或者给 li 设固定宽度，导致文字换行错位。
- 每项用
position: relative，方便后续加连接线和状态徽标 - 连接线用伪元素
::after画在li:not(:last-child)上，避免最后一步多画一根线 - 图标建议用 SVG 内联，比字体图标更可控尺寸和颜色，也避免跨域或加载失败白块
CSS怎么画连接线又稳又响应式
别用 border-bottom 拉线——它会随文字高度浮动，对不齐。稳妥做法是用 linear-gradient 或绝对定位的伪元素。比如：
li:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -1rem;
width: 2rem;
height: 2px;
background: #e0e0e0;
transform: translateY(-50%);
}
关键点：用 transform: translateY(-50%) 居中，而不是 top: 50% 单独撑开；right 值要留出足够间隙，否则小屏下线会压住下一个图标。
立即学习“前端免费学习笔记（深入）”；
- 响应式断点里，把连接线从水平切到垂直（
top: 100%+left: 50%），适合竖排步骤条 - 深色模式下记得重置连接线颜色，别只靠
prefers-color-scheme自动变，有些系统不触发 - 如果用 CSS 变量控制主题色，连接线颜色必须用
var(--step-line-color, #e0e0e0)，别硬编码
怎么让“已完成”“进行中”“未开始”状态视觉区分明显
光靠颜色不够——色盲用户可能分不清红绿。必须叠加形状、粗细、图标变化三重信号。比如：
- 已完成：
background: #4caf50+ 实心圆点 + 粗边框 + 对勾 SVG - 进行中：
background: #2196f3+ 空心圆点 + 边框加粗 + 无图标 - 未开始：
color: #9e9e9e+ 圆圈描边 + 文字变浅 +cursor: not-allowed
别用 opacity: 0.5 表示禁用，它会让整个步骤模糊，影响可读性；改用 color 和 border-color 降饱和度更安全。
注意：SVG 图标要用 fill="currentColor"，这样状态切换时只需改父元素的 color 就能同步变色，不用额外写 fill 规则。
移动端适配最容易漏掉的三个细节
很多步骤条在手机上点不动、看不清、挤成一团，问题不在布局，而在交互和缩放逻辑。
- 给
li加touch-action: manipulation，减少点击延迟 - 禁止双指缩放：
meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"—— 否则用户一捏就崩 - 小屏下把文字字号设为
clamp(0.75rem, 4vw, 0.875rem)，既保最小可读性，又防大屏撑爆容器
最常被忽略的是焦点管理：键盘 Tab 切换时，当前步骤必须有清晰的 :focus-visible 样式，且不能只靠 outline。建议加一层 box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3)，比默认 outline 更柔和、更易识别。
