纯css和html垂直步骤指示条制作指南
本文将指导您如何仅使用CSS和HTML创建类似上图所示的垂直步骤指示条。
实现步骤：
-
构建步骤容器： 使用
flexbox布局创建一个垂直排列步骤的容器。 设置flex-direction: column;实现垂直方向排列。 -
创建步骤编号： 为每个步骤添加一个元素，例如
<div>，并赋予其类名，例如<code>step-number。 使用CSS设置其width、height和border-radius属性，使其呈现圆形外观。立即学习“前端免费学习笔记（深入）”；
-
添加步骤间隙： 在步骤编号之间添加元素（例如
<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样式，您可以轻松调整步骤条的尺寸、颜色和间距，以满足您的设计需求。 记住根据实际需要调整类名和样式。
