步骤条不能仅用实现，因其需css控制横向布局、伪元素绘连线、状态类区分步骤，须用flex布局+::before画线+响应式断点调整。

步骤条为什么不能直接用 <ul></ul> 套 <li> 就完事

单纯写 <ul> <li>第一步</li> <li>第二步</li> </ul> 只会渲染成默认圆点列表，没有连线、序号、状态区分。步骤条本质是「带视觉状态的水平导航」，需要 CSS 控制布局、伪元素画线、状态类控制样式（比如 active、done、pending）。

用 <ul></ul> + display: flex 实现等宽横向布局

这是最可控的方式，避免浮动或 inline-block 的间隙问题：

• 给 <ul></ul> 加 display: flex 和 justify-content: space-between
• 每个 <li> 设为 flex: 1，再用 text-align: center 居中文本
• 第一项和最后一项不需要左侧/右侧连线，所以连线由 <li> 内部的伪元素 ::before 绘制（从第二项开始）

• 登录
• 验证
• 完成

用 ::before 画连接线并控制状态颜色

连线不是额外 DOM 元素，而是用伪元素在每项左侧画竖线（实际是细长矩形），再通过类名控制颜色和是否显示：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 给 .step:not(:first-child)::before 添加 content: ""、position: absolute、width: 2px、height: 24px、background: #ccc
• .step.done::before 和 .step.active::before 覆盖背景色为 #007bff
• 序号用 <span class="step-number"></span> 包裹，避免伪元素干扰语义

响应式断点要重排布局，别硬撑横排

小屏下强行横向步骤条会溢出或文字换行错乱：

• 在 @media (max-width: 768px) 中把 .step-bar 改为 flex-direction: column
• 移除 ::before 连线，改用 margin-bottom 分隔项
• 步骤编号放大、加粗，提升可读性，比如 .step-number { font-size: 1.2em; font-weight: bold; }
• 如果步骤超过 4 步，移动端建议改用垂直时间轴或分页式流程，而不是压缩横排

真正麻烦的不是画线，而是状态同步——前端必须确保 active 和 done 类名随业务逻辑实时更新，漏掉一个就断链。样式可以抄，状态管理得自己盯住。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！