网站步骤条（HTML 和 CSS 步骤指示器）
每行写一个步骤，选择当前步骤和样式。预览即时更新，代码可直接粘贴使用。
使用方法显示用户当前处于哪一步
可用语言: 
广告
网站步骤条（HTML 和 CSS 步骤指示器）: 用途
生成显示用户当前处于哪一步的步骤条：购物车、配送、支付和确认；资料、地址和核对；已收到订单、备货中和配送中。每行写一个步骤，选择当前步骤、方向和颜色。已完成的步骤会显示对勾，它们之间的线条会随进度变化。
代码使用有序列表，当前步骤带有 aria-current="step"，并为读屏软件提供一段隐藏的“已完成”提示。在横向模式下，窄屏幕上步骤条只显示数字和当前步骤的名称。还附带一个 irPara(n) 函数，用 JavaScript 切换步骤。
使用方法
- 写下步骤，每行一个。
- 选择当前步骤、方向和颜色。
- 复制代码或下载 HTML。
使用场景
- 网店结账。
- 分步注册表单。
- 订单跟踪。
常见问题
步骤条无障碍吗？
是的。它是有序列表（ol），所以读屏软件会播报步骤总数和每个步骤的位置。当前步骤带有 aria-current="step"，已完成的步骤有一段隐藏文字说明“已完成”。
在手机上能用吗？
在横向模式下，窄屏幕时步骤条只显示数字和当前步骤的名称，避免文字拥挤。纵向模式在任何屏幕上表现一致，很适合订单跟踪。
怎么用 JavaScript 切换当前步骤？
切换类名：之前的步骤使用 feito，当前步骤使用 atual 和 aria-current="step"，之后的步骤不加类。生成的代码中带有一个 irPara(n) 函数来完成这个操作。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。