好看的步骤条代码示例 - HTML & CSS 实现 - 常规

以下是一个简单的 HTML 和 CSS 代码示例，实现了一个好看的步骤条：

<!DOCTYPE html>
<html>
<head>
<style>
/* 步骤条容器 */
.step-container {
  width: 400px;
  margin: 50px auto;
}

/* 步骤条 */
.step {
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ccc;
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 18px;
  position: relative;
}

/* 步骤条数字 */
.step span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 激活的步骤 */
.step.active {
  background-color: #f00;
}

/* 激活的步骤数字 */
.step.active span {
  font-weight: bold;
}

/* 步骤线 */
.step-line {
  display: inline-block;
  width: 100px;
  height: 10px;
  background-color: #ccc;
  position: relative;
}

/* 激活的步骤线 */
.step-line.active {
  background-color: #f00;
}

/* 最后一条步骤线 */
.step-line:last-child {
  display: none;
}
</style>
</head>
<body>
<div class="step-container">
  <div class="step active"><span>1</span></div>
  <div class="step-line active"></div>
  <div class="step"><span>2</span></div>
  <div class="step-line"></div>
  <div class="step"><span>3</span></div>
  <div class="step-line"></div>
  <div class="step"><span>4</span></div>
</div>
</body>
</html>

这个代码创建了一个步骤条容器，包含了四个步骤。每个步骤都是一个圆形的 div 元素，使用 CSS 样式进行美化。激活的步骤使用不同的颜色进行区分，并在数字上加粗显示。步骤之间的连线使用水平的矩形 div 元素实现，通过添加和移除 CSS 类来控制激活步骤的显示。