竖向步骤条的html代码

以下是一个基本的竖向步骤条的 HTML 代码：

<div class="step-container">
  <div class="step-item">
    <div class="step-number">1</div>
    <div class="step-text">Step 1</div>
  </div>
  <div class="step-item">
    <div class="step-number">2</div>
    <div class="step-text">Step 2</div>
  </div>
  <div class="step-item">
    <div class="step-number">3</div>
    <div class="step-text">Step 3</div>
  </div>
</div>

在这个例子中，我们使用了一个 step-container 父容器来包含所有步骤条项。每个步骤条项使用 step-item 类来定义，并包含一个数字和一个文字描述。数字使用 step-number 类来定义，文字描述使用 step-text 类来定义。

为了使步骤条竖向展示，我们需要为 step-container 和 step-item 容器添加一些 CSS 样式：

.step-container {
  display: flex;
  flex-direction: column;
}

.step-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.step-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ddd;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.step-text {
  font-size: 16px;
}

在这个 CSS 样式中，我们使用了 flex-direction: column 属性来使 step-container 容器垂直排列，使用了 align-items: center 属性来使 step-item 容器的内容垂直居中对齐。我们还使用了一些样式来定义步骤条数字和文字描述的样式，你可以根据自己的需求来修改这些样式