必须用
- 。步骤有明确顺序，语义上属有序列表，
- 元素。
用
还是做步骤条更合理 必须用。步骤有明确顺序，语义上就是“有序列表”，会丢失结构含义，影响屏幕阅读器识别和 SEO。浏览器对的默认序号（1、2、3…）可直接利用，无需额外生成数字，也避免 JS 动态插入带来的可访问性风险。 常见错误是把每个步骤包进
再套，这反而破坏了语义层级。正确结构应是：注意：不要给- 填写信息
- 验证身份
- 设置密码
- 完成注册
设后再手动居中——容易在小屏下换行错位；用display: inline-block更稳。 CSS 横向排列时 flex 和 float 哪个更可靠 用flex。现代项目基本不用display: flex布局步骤条，因为float需要清除浮动、不支持 gap、响应式调整麻烦，且在 Flex 容器里float会被忽略。 立即学习 “ 前端免费学习笔记（深入） ”； 关键 CSS 要点： 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载float每个.step-indicator { display: flex; justify-content: space-between; align-items: center; }不设固定宽度，靠均分空间（或按需设flex: 1+flex: 0 0 auto） 连接线用伪元素min-width绘制，加在前::after个n−1上，避免最后一步多画一条线 移动端用改为@media (max-width: 768px)，并隐藏连接线 如何让步骤状态（active/current/finished）真正可访问 光靠颜色区分不够。必须用 ARIA 属性告诉辅助技术当前状态： 未开始的步骤：加flex-direction: column和aria-disabled="true"当前步骤（进行中）：加tabindex="-1"（这是关键，比 class 更有效） 已完成步骤：加aria-current="step"，避免只写“✓”导致读屏器无法理解 整个列表加aria-label="已完成：验证身份"或保留原生role="navigation"语义，不覆盖 别依赖 JS 动态加 class 后再补 ARIA —— 应该在 HTML 初始渲染时就写全。否则首屏加载慢时，辅助技术可能读到错误状态。 JavaScript 动态更新步骤时最容易漏掉的三件事 不是所有步骤跳转都需要 JS，但一旦用了，下面三点几乎必踩坑： 没同步更新：如果步骤条还兼作进度指示器（比如 3/4 步），记得同时改容器的aria-valuenow和aria-valuenow="3"没处理键盘导航：用户按 Tab 进入步骤条后，应能用 ← → 键切换焦点，且焦点移动时自动触发状态更新（监听aria-valuemax="4"+keydown） 没防重复触发：比如连续点击“下一步”按钮两次，可能导致focus类被加两次、current类被清空异常。建议用状态机方式管理，而不是单纯靠 class 切换 最常被忽略的是响应式断点下的状态重置——比如横屏时是第 3 步，切到竖屏后仍保持第 3 步视觉，但连接线消失、文字堆叠，此时若没重新计算布局或隐藏冗余状态，用户会困惑“我到底在哪一步”。active
- 会丢失结构含义，影响可访问性和SEO；正确结构为
- 包含带状态的