纯CSS实现步骤条

最新推荐文章于 2025-04-25 17:23:22 发布

原创

最新推荐文章于 2025-04-25 17:23:22 发布 · 1.5k 阅读

标签

#css #前端

收录于

纯CSS实现纵向Steps步骤条效果

效果图

在这里插入图片描述

实现思路

步骤条是一种用于引导用户按照特定流程完成任务的导航条，在各种分步表单交互场景中广泛应用。步骤条通常由编号、名称和引导线三个基本要素组成。本文中要实现的是一个简单的步骤条，包含上述三个基本要素。

实现代码

html代码

<div class="steps">
	  <div class="step-item">
	    <span class="step-dot"></span>
	    <div class="step-content">
	      <div class="step-title">名单</div>
	      <div class="step-desc">日期</div>
	    </div>
	    <div class="step-line"></div> <!-- 添加这一行 -->
	  </div>
		<div class="step-item">
		  <span class="step-dot"></span>
		  <div class="step-content">
		    <div class="step-title">名单</div>
		    <div class="step-desc">日期</div>
		  </div>