CSS步骤条

• HTML

<!-- 定制流程  -->
			<div class="customized-wap">
				<div class="customized">
					<div class="customized-title">定制流程</div>
					<div class="customized-content">
						<div class="customized-content-step-line"></div>
						<div class="customized-content-step">
							<div class="customized-content-step-item">
								<div class="customized-content-step-item-wap-border">
									<div class="customized-content-step-item-Inner-border">01</div>
								</div>
								<div class="customized-content-step-title">客户提出需求</div>
								<div class="customized-content-step-text">客户提出通用或专项服务需。</div>
							</div>
							<div class="customized-content-step-item">
								<div class="customized-content-step-item-wap-border">
									<div class="customized-content-step-item-Inner-border">02</div>
								</div>
								<div class="customized-content-step-title">需求沟通合作</div>
								<div class="customized-content-step-text">需求沟通后，双方就目标实现达成合作。</div>
							</div>
							<div class="customized-content-step-item">
								<div class="customized-content-step-item-wap-border">
									<div class="customized-content-step-item-Inner-border">03</div>
								</div>
								<div class="customized-content-step-title">接口开发调试</div>
								<div class="customized-content-step-text">双方签订合同并进行接口开发与调试。</div>
							</div>
							<div class="customized-content-step-item">
								<div class="customized-content-step-item-wap-border">
									<div class="customized-content-step-item-Inner-border">04</div>
								</div>
								<div class="customized-content-step-title">正式上线运行</div>
								<div class="customized-content-step-text">双方联调无误后，正式上线运行。</div>
							</div>
						</div>
					</div>
				</div>
			</div>

• CSS

.customized-wap{width: 100%;height: auto;}
.customized{width: 1000px;margin:0 auto;height:458px;padding-top: 70px;}
.customized-title{color: #fff;}
.customized-content{height: 300px;border-radius: 8px;background: #fff;width: 100%;margin:0 auto;position: relative;}
.customized-content-step-line{height: 2px;width:850px;border-bottom:2px dashed #bec7fc;position: absolute;top: 98px;left: 75px;}
.customized-content-step{display:flex;width: 800px;margin:0 auto;padding-top: 60px}
.customized-content-step-item{flex:1;}
.customized-content-step-item-wap-border{width: 75px;height: 75px;border-radius: 50%;border:1px solid #9eabfa;margin: 0 auto;position: relative;}
.customized-content-step-item-Inner-border{width: 55px;height:55px;border-radius: 50%;background:#3c57f6;color: #fff;margin: 10px;font-size: 18px;text-align:center;line-height: 55px;}
.customized-content-step-title{color: #333333;font-size: 18px;margin-top: 15px;text-align:center;}
.customized-content-step-text{color: #999999;font-size: 14px;width: 68%;margin: 0 auto;text-align: center;margin-top: 12px;line-height: 25px;}

预览图
![在这里插入图片描述](https://img-blog.csdnimg.cn/3a76fcc5b4ec48a8b736b93c86a95285.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2VpeGluXzQzOTI4OTY2,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)