如何用纯CSS和HTML创建垂直步骤指示条？-html教程-PHP中文网

如何用纯CSS和HTML创建垂直步骤指示条？

碧海醫心

发布： 2025-02-20 10:52:12

原创

814人浏览过

如何用纯CSS和HTML创建垂直步骤指示条？

纯css和html垂直步骤指示条制作指南

本文将指导您如何仅使用CSS和HTML创建类似上图所示的垂直步骤指示条。

实现步骤：

构建步骤容器： 使用flexbox布局创建一个垂直排列步骤的容器。设置flex-direction: column; 实现垂直方向排列。
创建步骤编号： 为每个步骤添加一个元素，例如<div>，并赋予其类名，例如<code>step-number。使用CSS设置其width、height和border-radius属性，使其呈现圆形外观。
立即学习“前端免费学习笔记（深入）”；

芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情
添加步骤间隙： 在步骤编号之间添加元素（例如<div>）作为间隙，并设置其类名，例如<code>step-gap。通过调整height属性控制间隙高度。
高亮活动步骤： 为已完成的步骤添加一个类名，例如active，并使用CSS修改其背景颜色等样式，以突出显示已完成的步骤。

示例代码：

<code class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>垂直步骤指示条</title>
<style>
.step-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中 */
}

.step-number {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px; /*调整步骤间的垂直间距*/
}

.step-number.active {
  background-color: gold;
}

.step-gap {
  width: 5px;
  height: 20px; /*调整步骤间的垂直间距*/
  background-color: lightgray;
  margin-bottom: 10px; /*调整步骤间的垂直间距*/
}

.step-gap.active {
  background-color: gold;
}
</style>
</head>
<body>

<div class="step-container">
  <div class="step-number active">1</div>
  <div class="step-gap active"></div>
  <div class="step-number active">2</div>
  <div class="step-gap active"></div>
  <div class="step-number">3</div>
  <div class="step-gap"></div>
  <div class="step-number">4</div>
  <div class="step-gap"></div>
  <div class="step-number">5</div>
</div>

</body>
</html></code>

登录后复制

通过修改CSS样式，您可以轻松调整步骤条的尺寸、颜色和间距，以满足您的设计需求。记住根据实际需要调整类名和样式。