纯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>
		  <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>
		  <div class="step-line"></div> <!-- 添加这一行 -->
		</div>
	</div>

CSS代码

<style>
		.step-item {
		  position: relative;
		  display: flex;
		  align-items: flex-start;
		  margin-bottom: 10px;
		}
		
		.step-dot {
		  width: 10px;
		  height: 10px;
		  border-radius: 50%;
		  background-color: #3c9cff;
		  margin-right: 10px;
		  flex-shrink: 0; /* 防止圆点挤压内容 */
		  align-self: flex-start; /* 将圆点对齐到左上角 */
		}
		
		.step-content {
		  display: flex;
		  flex-direction: column;
		}
		
		.step-title {
		  font-weight: bold;
		  font-size: 18px;
		}
		.step-desc {
		  font-size: 16px;
		  padding-top: 4px;
		  color: #999;
		}
		
		.step-line {
		  position: absolute;
		  top: 10px; /* 根据圆点的尺寸调整 */
		  left: 4px; /* 将竖线居中对齐 */
		  bottom: -20px; /* 调整竖线的长度 */
		  width: 1px;
		  background-color: #3c9cff;
		}
		.step-item:last-child .step-line{
			display: none;
		}
	
	</style>
相关推荐
爱吃青椒不爱吃西红柿‍️1 分钟前
华为ASP与CSP是什么?
服务器·前端·数据库
一棵开花的树,枝芽无限靠近你5 分钟前
【PPTist】添加PPT模版
前端·学习·编辑器·html
陈王卜7 分钟前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑15 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
SameX17 分钟前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
小行星12526 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12533 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00142 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿1 小时前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript