快速学会HTML分步式向导导航条代码-html教程-PHP中文网

用ol+伪元素实现圆点连线步骤条：.step::before画圆点，li:not(:last-child)::after绘横线；状态通过step、active、done类控制样式；响应式下小屏改flex-direction:column并隐藏连线。

快速学会html分步式向导导航条代码

导航条怎么让步骤显示为圆点+连线

用纯 CSS 实现分步式导航，关键不是靠 JS 控制状态，而是用 ol 或 ul + 自定义 ::before 伪元素画圆点。连线推荐用左右 padding 搭配 border-bottom 或绝对定位的细线——别用图片或 SVG，增加加载和维护成本。

常见错误是直接给 li 加 float: left 导致连线断裂；正确做法是让所有 li 在同一行内布局，用 display: flex 或 display: inline-block，并统一设置 flex: 1 或 width 分配空间。

每个步骤项用 li 包裹，内容放 span 或 div，避免语义混乱
圆点用 li::before 绘制，宽高设为 1.2em，border-radius: 50%，背景色通过 class 切换（如 active、done）
连线用 li:not(:last-child)::after 生成，position: absolute 向右延伸，宽度固定（如 calc(100% - 1.2em)），高度 2px

如何用 class 控制当前步骤高亮和已完成状态

不要写一堆 JS 去动态增删 class，先定义好三类状态：未开始（step）、进行中（step active）、已完成（step done）。CSS 里用属性组合精准控制样式，比如 .step.active::before 改背景色，.step.done::before 加对勾图标（用 content: "✓" 或 Unicode ✅）。

容易踩的坑：把 active 和 done 同时加在一个 li 上，导致样式冲突；应该只保留一个状态 class，JS 更新时清空再重设。

.step::before：灰色圆点，无边框
.step.active::before：蓝色实心圆，可加阴影增强视觉焦点
.step.done::before：绿色圆点 + 白色对勾，color: #fff 配合 font-size: 0.7em
文字颜色同步变化：.step.active span 加粗，.step.done span 设为深灰

响应式下怎么让步骤在小屏堆叠不折断连线

移动端不能硬撑一行，必须允许垂直排列。核心是用媒体查询切换 flex-direction，同时关闭连线、改用上下箭头或简单分割线。别试图在手机上保持“圆点+横线”布局——那会挤压文字、触发横向滚动，体验极差。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

实际测试发现，@media (max-width: 768px) 是较稳妥的断点；更小屏（如 iPhone SE）建议直接去掉所有连线，仅靠圆点大小和颜色区分状态。

桌面端：ol.steps { display: flex; justify-content: space-between; }
移动端：ol.steps { flex-direction: column; align-items: flex-start; }
隐藏连线：li:not(:last-child)::after { display: none; } 放进媒体查询里
圆点垂直居左，文字用 margin-left: 2em 对齐，避免缩进错乱

为什么用 `ol` 而不是 `ul` 写步骤导航

步骤有明确顺序和编号意义，ol 是语义正确选择。浏览器和读屏软件会自动播报“第1步”“第2步”，而 ul 只读作“列表项”。如果用 ul，就得手动加 aria-label 和 role="list" 补救，徒增复杂度。

另一个现实问题是：某些旧版 Safari 对 ol 的 counter-reset 支持不稳定，所以别依赖 li::marker 显示数字，一律用 ::before 伪元素生成内容（content: counter(step)），并配合 counter-increment: step。

ol.steps { counter-reset: step; } 必须设在父容器上
li::before { counter-increment: step; content: counter(step); } 才能自增编号
若需中文“第一步”，用 content: "第一步" 等静态文本，放弃自动计数
IE11 不支持 counter()，如需兼容，老老实实用 data-step="1" + JS 注入

实际项目里，最常被忽略的是键盘焦点管理——按 Tab 键时，每个步骤应可聚焦，且 active 状态要同步更新。这需要给每个 li 加 tabindex="0"，再监听 keydown 处理方向键跳转。不是所有业务都需要，但表单类多步流程必须考虑。