HTML+CSS实现下图效果

 HTML

<div class="repair_status">
　　<ul class="status_list">
　　　　<li class="active">
　　　　　　<span class="status_dot">1</span>
　　　　　　<div>评估接单</div>
　　　　</li>
　　　　<li class="active">
　　　　　　<span class="status_dot">2</span>
　　　　　　<div>维修优选</div>
　　　　</li>
　　　　<li class="active">
　　　　　　<span class="status_dot">3</span>
　　　　　　<div>维修服务</div>
　　　　</li>
　　　　<li>
　　　　　　<span class="status_dot">4</span>
　　　　　　<div>客户确认</div>
　　　　</li>
　　</ul>
</div>

CSS

*{
　　margin: 0;
　　padding: 0;
　　box-sizing: border-box;
}
ul,li{
　　list-style: none;　　/*列表符隐去不见, li里面的内容与框之间没有距离*/
}
body,html{
　　font-family: helvetica,arial,sans-serif;　　/*这个样式的意思是，设置文字字体为helvetica，如果用户电脑里面没有这个字体，就使用arial作为字体，以此往后推，最后的sans-serif一般是所有电脑都有的*/
　　color: #666;
　　font-size: 10px;
　　height: 100%;
　　width: 100%;
　　background-color: #F4F5F5;
}
@media screen and (min-width:321px) and (max-width:375px){html,body {font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html,body {font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html,body{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html,body{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html,body{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html,body{font-size:23.5px}}
@media screen and (min-width:800px){html,body{font-size:25px}}

.repair_status{
　　margin: 0 1rem;
　　position: relative;
}
.status_list{
　　position: relative;
　　overflow: hidden;
　　padding: 1.5rem 0;
}
.status_list li{
　　width: 25%;
　　float: left;
　　position: relative;
　　text-align: center;
　　color: #999;
}

 

.status_list li .status_dot{
　　background-color: #B5B5B5;
　　width: 1.5rem;
　　height: 1.5rem;
　　text-align: center;
　　line-height: 1.5rem;
　　color: #FFFFFF;
　　font-weight: bold;
　　display: inline-block;
　　border-radius: 50%;
　　border: 0.5rem solid #E1E2E2;　　/*边框*/
　　box-sizing: content-box;　　/*content-box，border和padding不计算入width之内*/
　　position: relative;
　　z-index: 2;
}

 

.status_list li.active .status_dot{
　　background-color: #0FA1D5;
　　border: 0.5rem solid #AFDCEB;
}
.status_list li::after{
　　content: "";
　　position: absolute;
　　width: 100%;
　　height: 0;
　　top:1.1rem;
　　border-bottom: 0.2rem dotted #B5B5B5;
}
.status_list li.active::after{
　　border-bottom: 0.2rem dotted #0FA1D5;
}
.status_list li:last-child::after{
　　display: none;
}
.status_list li div{
　　margin-top: 0.5rem;
}
.status_list li.active div{
　　color: #0FA1D5;
}