纯css可实现带进度指示的步骤条：用语义化结构，data-status或class标记状态，相邻兄弟选择器画线，::before绘圆点与序号；三态样式通过.step--done/.step--active/.step--pending控制，连接线颜色由前项状态决定，序号用counter自增，图标用unicode或inline svg；js仅切换class，需防重复操作、越界及中间状态同步；移动端用横向滚动+scroll-snap优化。
用 CSS 实现带进度指示的步骤条，不需要 JS 也能动
纯 HTML + CSS 就能做出视觉清晰、状态可更新的步骤条，关键在结构语义化 + linear-gradient 或伪元素控制进度。JS 只需在切换步骤时改一个 class，不参与样式计算。
推荐用 <ol></ol> 包裹步骤项，每个 <li> 代表一步，用 data-status="active" 或 class="step--done" 标记当前状态。CSS 里用相邻兄弟选择器（+ li）画连接线，再用 ::before 绘制圆点和数字。
- 避免用
<div> 堆砌，屏幕阅读器能正确读出步骤顺序 <li>进度线不要用图片或 SVG，否则缩放/高对比度模式下易断裂</li> <li>别给 <code>li设固定宽度，用flex+justify-content: space-between自适应容器 - 用
counter-increment+::before { content: counter(step) }自动生成序号，避免硬编码数字 - 对勾图标建议用 Unicode（如
\2713）或 inline SVG，比字体图标更可控 - 别用
opacity区分状态，应改color和border-color，保证高对比度模式可用 - 每次更新前先执行
document.querySelectorAll('.step').forEach(el => el.classList.remove('step--done', 'step--active'))，再按当前 stepIndex 重新赋值 - 检查
stepIndex是否越界（或 <code>>= steps.length），越界直接 return，不操作 DOM - 如果步骤支持跳转（非线性），记得同步更新所有中间步骤的状态，不能只改目标项
如何用 CSS 控制“已完成”“进行中”“未开始”三种状态
核心是定义三类 class：.step--done、.step--active、.step--pending，分别作用于 li 元素。进度线的颜色和圆点样式靠这些 class 触发。
例如：已完成步骤的圆点用绿色实心 + 对勾图标，进行中的是蓝色描边 + 数字，未开始的是灰色空心圆。连接线颜色由上一节点状态决定——只要前一个 li 是 .step--done，它后面的 ::before 连接线就设为绿色。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
用 JavaScript 更新步骤状态时最容易漏掉的两件事
JS 只负责切换 class，但实际项目里常因忽略边界条件导致 UI 错乱：比如用户狂点“下一步”，没防重复提交；或后退到上一步时，没清掉后续所有 .step--done 状态。
移动端适配时连接线断开？试试这个 flex 技巧
小屏下步骤多，flex-wrap: wrap 会让连接线错位。更稳的做法是：禁用换行，改用横向滚动容器，并加 scroll-snap-align: start 提升滑动体验。
关键代码：
.steps-container {
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
.steps-list {
display: flex;
width: max-content;
}
.steps-list li {
scroll-snap-align: start;
}
- 别用
white-space: nowrap+inline-block，iOS Safari 下可能触发意外换行 - 滚动容器必须设
width: 100%且父级无min-width限制，否则横向滚动失效 - 安卓 WebView 旧版本不支持
scroll-snap-align，可降级为监听scroll事件 +scrollLeft计算当前可视步骤
