使用纯css和html构建步骤指示器

本文将指导您如何仅使用CSS和HTML创建类似于示例图片的步骤指示器。

解决方案：

以下提供简洁易懂的HTML和CSS代码：

HTML代码：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

<code class="html"><div class="progress-bar">
  <div class="step active">1</div>
  <div class="step">2</div>
  <div class="step">3</div>
  <div class="step">4</div>
  <div class="step">5</div>
</div></code>

CSS代码：

<code class="css">.progress-bar {
  display: flex;
  align-items: center; /*垂直居中*/
}

.step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: lightgray;
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
  margin: 0 5px; /*调整步骤间的间距*/
}

.step.active {
  background-color: gold;
}</code>

说明：

此方案利用flexbox布局，使步骤指示器水平排列。每个步骤用.step类表示，激活步骤用.active类高亮显示。 通过调整CSS中的width, height, margin等属性，您可以轻松自定义步骤指示器的样式和大小。