HTML怎么制作一个简洁的带有进度显示的步骤条-html教程-PHP中文网

纯css步骤条通过data属性+伪元素实现，用counter-reset和::before生成序号，::after绘制进度线，data-current控制状态，配合无障碍属性确保可访问性。

html怎么制作一个简洁的带有进度显示的步骤条

用 CSS 实现纯静态步骤条，不依赖 JS 就能显示当前步

纯 CSS 步骤条适合流程固定、无需交互跳转的场景（比如表单提交后的结果页）。关键在于用 counter-reset 和 ::before 生成序号，再用背景色或边框区分“已完成”和“未完成”状态。

常见错误是直接给每个步骤写死颜色，导致后期增减步骤时要改一堆样式。正确做法是用 data-step 属性 + CSS 属性选择器控制状态：

<div class="stepper" data-current="2">
  <div class="step" data-index="1">填写信息</div>
  <div class="step" data-index="2">确认订单</div>
  <div class="step" data-index="3">支付完成</div>
</div>

然后用 CSS 匹配：

.stepper [data-index] {
  position: relative;
}
.stepper [data-index]::before {
  content: attr(data-index);
}
.stepper [data-index]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 100%;
  height: 2px;
  background: #e0e0e0;
}
.stepper [data-index]::after {
  transform: translateY(-50%);
}
.stepper [data-index][data-index="1"]::after { background: #4caf50; }
.stepper [data-index][data-index="2"]::after { background: #4caf50; }
.stepper [data-index][data-index="3"]::after { background: #e0e0e0; }

进度线用 ::after 画在每个步骤右侧，最后一项不需要画线，可加 :last-child::after { display: none; }
颜色逻辑靠 data-current 控制更灵活，但纯 CSS 无法动态计算“之前所有步”，所以建议用 JS 更新属性值后由 CSS 响应
移动端要注意 white-space: nowrap 防止文字换行撑开步骤块

用 JavaScript 动态更新步骤状态，支持点击回退或 API 同步

当步骤状态来自接口返回或用户操作（如点击“上一步”），必须用 JS 控制 data-current 或 class。不要直接操作内联样式——它会覆盖 CSS 中的过渡动画。

典型场景：用户完成第 2 步后，调用 updateStep(3) 进入下一步。函数里只做两件事：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

给当前步骤容器设置 data-current="3"
给对应 .step[data-index="3"] 添加 class="active"，同时移除其他 .active

这样 CSS 可以统一用：

.step.active::before { background: #4caf50; color: white; }
.step.active ~ .step::before { background: #e0e0e0; color: #999; }
.step.active ~ .step::after { background: #e0e0e0; }

注意：~ 是通用兄弟选择器，确保“后续步骤”样式被覆盖；如果用 +，只能影响紧邻下一个，不适用多步场景。

避免进度条在 Safari 上错位或动画卡顿

Safari 对 transform: translateX() 的子元素渲染有兼容问题，尤其配合 flex 布局时，步骤圆点容易偏移。最稳方案是放弃用 transform 控制进度线长度，改用 width + overflow: hidden。

把进度线抽成独立 <div class="progress-line">，放在步骤容器外层<li>用 JS 设置其 <code>style.width = (currentStep - 1) / (totalSteps - 1) * 100 + '%'（首步为 0%，末步为 100%）
给 .progress-line 加 transition: width 0.3s ease，Safari 支持良好
别对 ::before 或 ::after 做 width 动画——伪元素不支持 transition