进程条(横向)

最新推荐文章于 2024-08-03 23:12:25 发布

浅脂弱

最新推荐文章于 2024-08-03 23:12:25 发布

阅读量243

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/mozhi111/article/details/78676183

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是一个HTML代码示例，展示了进程条的实现，包括成功和失败的状态。页面包含多个圆圈表示状态，连接的线条表示进程流转，每个圆圈内可填充状态描述。可用于表示流程审核、货物状态等。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="test.css" />
	</head>
	 

	<body>
		<div style="margin-top: 100px;margin-left: 30%;">

			<div class="circleSucess">
				<!--<div class="content">审核通过</div>-->
			</div> 
			<div class="out">
				<div class="lineSuccess"></div>
			</div>
			<div class="circleSucess">
				<!--<div class="content">等待收(验)货 </div>-->
			</div>

			<div class="out">
				<div class="lineFail"></div>
			</div>

			<div class="circleFail">
				<!--<div class="content">收(货)正常</div>-->
			</div>
			
			<div class="out">
			<div class="lineFail"></div>
			</div>
			<div class="circleFail">
				<!--<div class="content">等待重新发货</div>-->
			</div>
			
			<div class="out">
			<div class="lineFail"></div>
			</div>									
			<div class="circleFail">
				<!--<div class="content">已完成</div>-->
			</div>
			<br />
			<!--<div class="circleSucess">
				<div class="content">审核通过</div>
			</div> 
			<div class="out">
				<div class="lineSuccess"></div>
			</div>
			<div class="circleSucess">
				<div class="content">等待收(验)货 </div>
			</div>

			<div class="out">
				<div class="lineFail"></div>
			</div>

			<div class="circleFail">
				<div class="content">收(货)正常</div>
			</div>
			
			<div class="out">
			<div class="lineFail"></div>
			</div>
			<div class="circleFail">
				<div class="content">等待重新发货</div>
			</div>
			
			<div class="out">
			<div class="lineFail"></div>
			</div>									
			<div class="circleFail">
				<div class="content">已完成</div>
			</div>-->
			
		</div>
		<div style="margin-left: 30%;">

<div class="content">审核通过</div>
<div class="content">等待收(验)货 </div>
<div class="content">收(货)正常</div>
	<div class="content">等待重新发货</div>		 
		<div class="content">已完成</div>	 

			 
			
			 
			
			 		 
			
		</div>

		 

		<!--审核通过 <span></span> 等待收(验)货 <span></span> 收(货)正常 <span></span> 
			
		等待重新发货 <span></span> 已完成    
		审核通过 <span></span> 等待收(验)货 <span></span> 收(验)货完成 <span></span>等待退款 <span></span> 已完成-->

		 

		<script>
		</script>
	</body>

</html>