html实现竖直步骤条

1、问题描述

        最近碰到一个需求，要把审批流程改为竖直步骤条的形式。本来想直接抄网上的，但是网上给的要么是水平步骤条，要么是集成在框架里的，要么就是人家写的太复杂了，js，css一大堆。

2、我的代码

        代码下载：【免费】步骤条Demo.zip资源-CSDN文库

        index.html

	
		
		
	
	
	
	
		
		

			

			
步骤一
			同意
			拒绝
		
		
		

			

			
步骤二
			同意
			拒绝
		

		

			

			
步骤三
			同意
			拒绝
		

		

			

			
步骤四
			同意
			拒绝
		

		

			

			
步骤五
			同意
			拒绝
		

		

			

			
步骤六
			同意
			拒绝
		

		

			

			
步骤七
			同意
			拒绝
		

		

			

			
步骤八
			同意
			拒绝
		
	

        myStyle.css

.step {
	display: table;
	height: 100px;
	.point {
		display: table-cell;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		/* background-color: #B4CFEC; */
		/* position: relative; */
		background-color:#DDDDDD;
		float: left;
		margin: 10px;
	}

	.content {
		display: table-cell;
		position: relative;
		float: right;
		margin-left: 10px;
	}
}

.step.is-finish{
	display: table;
	height: 100px;
	.point {
		display: table-cell;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		/* background-color: #0E098B; */
		/* position: relative; */
		background-color:#B4CFEC;
		float: left;
		margin: 10px;
	}
	
	.content {
		display: table-cell;
		position: relative;
		float: right;
		margin-left: 10px;
	}
}

.step.is-ready{
	display: table;
	height: 100px;
	.point {
		display: table-cell;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #0E098B;
		/* position: relative; */
		/* background-color:#B4CFEC; */
		float: left;
		margin: 10px;
	}
	
	.content {
		display: table-cell;
		position: relative;
		float: right;
		margin-left: 10px;
	}
}

.step-bar {
	width: 1px;
	background-color: #4995FA;
	display: inline-block;
	position: absolute;
	z-index: 1;
	/*这里设置大于2，即可看到真正连线的其实是两个元素的中心坐标*/
}

.btnApprove {
	background-color: aquamarine;
	position:absolute;
	margin-left: 100px;
}

.btnRefuse {
	background-color:greenyellow;
	position:absolute;
	margin-left: 150px;
}

3、效果

4、总结

        无

5、参考资料

jquery获取当前元素的坐标_jq获取元素坐标-CSDN博客

js+css实现两个dom元素之间的连线_js 连线-CSDN博客 

模板字符串 - JavaScript | MDN