HTML网页步骤条进度指示器代码-html教程-PHP中文网

最简结构纯css步骤条用语义化列表，.step-bar li::before生成序号圆点，li:not(:last-child)::after绘制连接线，通过flex: 1均分空间并用right: -50%精准对齐连线，无需js即可静态展示且兼顾可访问性。

html网页步骤条进度指示器代码

步骤条怎么用 CSS 实现最简结构

纯 CSS 实现步骤条，核心是用 ol 或 ul 列表 + 伪元素 ::before 绘制圆点和连线，不需要 JS 就能静态展示进度。关键不是“多好看”，而是“结构语义正确、可访问、易扩展”。

推荐用 ol（有序列表），因为步骤有明确顺序，屏幕阅读器能识别序号：

<ol class="step-bar">
<li class="step done">填写信息</li>
  <li class="step active">确认订单</li>
  <li class="step">支付完成</li>
</ol>

done 表示已完成，active 表示当前步，空 class 表示未开始
所有 li 必须有文本内容，否则影响可访问性
避免用 float 或绝对定位做连线——容易错位，优先用 flex + border-bottom 模拟横线

CSS 样式里哪些属性最容易导致连线断裂

常见错误是给 li 设了 width 或 min-width，又没配 flex-shrink: 0，导致小屏下文字换行、圆点偏移、连线断开。

可靠写法是让容器 display: flex，每个 li 占等分空间：

.step-bar {
  display: flex;
  counter-reset: step;
}
.step-bar li {
  flex: 1;
  position: relative;
  text-align: center;
}
.step-bar li::before {
  content: counter(step);
  counter-increment: step;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #666;
  display: inline-block;
}
.step-bar li.done::before,
.step-bar li.active::before {
  background: #4caf50;
  color: white;
}
.step-bar li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  right: -50%;
  height: 2px;
  background: #e0e0e0;
}

right: -50% 是关键：确保连线从当前项中点延伸到下一项中点，不依赖固定宽度
如果用了 font-size: 0 清除 inline 元素间隙，记得在 li 里重设 font-size
IE11 不支持 flex 下的 gap，别用它替代 margin 控制间距

如何用 JavaScript 动态更新步骤状态

状态更新本质就是操作 DOM class，但要注意：不能只改 class，还得同步更新 aria-current 和 aria-disabled 属性，否则对键盘用户不友好。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

简单封装一个切换函数：

function setStepActive(index) {
  const steps = document.querySelectorAll('.step-bar li');
  steps.forEach((el, i) => {
    el.classList.remove('done', 'active');
    el.removeAttribute('aria-current');
    el.setAttribute('aria-disabled', 'true');
    if (i

调用时传入 0-based 索引，比如 setStepActive(1) 表示第二步激活
不要用 innerHTML 替换整个 li，会丢失焦点和事件绑定
如果步骤支持回退，需检查上一步是否为 done，否则不允许跳转

移动端适配时文字折行把圆点顶歪了怎么办

小屏下文字撑开 li 宽度，圆点被挤到顶部或底部，根本原因是 line-height 和 vertical-align 没对齐。

解决方式很直接：强制单行 + 溢出省略，并让圆点脱离文本流：

.step-bar li::before {
  /* ...原有样式 */
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.step-bar li span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
  margin: 0 auto;
}