HTML怎么做阶梯进度条_HTML阶梯式步骤进度条实现【最全】

陆砚码

2026-09-17 • 👁 2人浏览过

用 CSS Grid 实现响应式阶梯进度条需设 display: grid 和 auto-fit 列布局，用伪元素画圆点与横线，通过 data-active 控制状态，IE11 降级用 Flex+显式宽度，须兼顾无障碍与垂直居中一致性。用 CSS Grid 实现可响应的阶梯进度条纯 CSS 实现阶梯式进度条，关键不是用

progress

元素（它不支持阶梯状），而是靠

grid

布局 + 伪元素控制连接线与步骤点。Grid 能精准对齐「步骤圆点」和「中间横线」，且天然支持等宽自适应。实操建议：立即学习 “ 前端免费学习笔记（深入） ”；容器设为

display: grid

，用

grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))

实现响应式列数每个步骤项用

::before

画圆点，

::after

画右侧横线（最后一项除外）激活状态通过给对应步骤项加

data-active="true"

，用属性选择器控制颜色和横线长度避免用

float

或绝对定位——会导致横线对不齐、缩放时错位 JavaScript 动态更新步骤状态时的 DOM 操作要点手动切换步骤（比如点击下一步按钮）时，别直接操作 class 列表拼接字符串，容易漏删旧状态或重复添加。实操建议：立即学习 “ 前端免费学习笔记（深入） ”；统一用

element.dataset.active = "true"

"false"

控制状态，CSS 侧用

[data-active="true"]

匹配横线长度依赖相邻步骤是否都激活：只有当前项和下一项都为

active

时，才显示完整横线；否则截断（可用

clip-path

或控制

width

）不要在循环里反复调用

querySelectorAll

，缓存节点列表，用

Array.from()

转成数组再遍历移动端点击区域小？给步骤项加

min-height: 44px

和

padding

，但别改圆点尺寸本身 IE11 兼容方案：用 Flex 替代 Grid 的取舍如果必须支持 IE11，Grid 会失效，得降级到

flex

+ 显式宽度计算。这不是“加个前缀”能解决的，是布局模型切换。使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更下载实操建议：立即学习 “ 前端免费学习笔记（深入） ”；用

@supports not (display: grid)

包裹 Flex 方案，避免覆盖现代浏览器样式 Flex 下横线要用单独的

元素，不能靠伪元素——IE11 对

::after

在 flex 容器里的定位支持极差步骤圆点用

margin-left: -16px

往左微调对齐，因为 Flex 无法像 Grid 那样精确定义轨道起点放弃自动响应列数：IE11 下固定写死

flex: 0 0 25%

（4步）或

flex: 0 0 33.33%

（3步），用媒体查询分段适配无障碍与语义化：别让屏幕阅读器读成“一堆圆点” 阶梯进度条本质是流程导航，但默认只是视觉呈现，对屏幕阅读器不可见。用户可能卡在第二步却不知道当前处于第几步。实操建议：立即学习 “ 前端免费学习笔记（深入） ”；每个步骤项加上

role="region"

和

aria-labelledby

指向内部标题用

aria-current="step"

标记当前激活项（比

aria-selected

更准确）隐藏装饰性横线：给

.step-connector

加

aria-hidden="true"

别用

visibility: hidden

隐藏未完成步骤文字——它仍会被读出；改用

clip-path: inset(100%)

或

position: absolute; left: -9999px

最易被忽略的是横线与圆点的垂直居中一致性：不同字体、行高、box-sizing 下，

top: 50%

可能偏移几个像素。建议所有圆点用

transform: translateY(-50%)

，横线用

align-self: center

（Grid）或

align-items: center

（Flex），而不是依赖 margin 或 top。

相关文章