1.
html:
<div class="odContent"> <ul class="tpinfo"> <li class="active"> <p>退票申请</p> <p>2016-11-2 08:45</p> </li> <li> <p>退票受理中</p> <p>2016-11-2 08:45</p> </li> <li> <p>退票完成</p> <p>2016-11-2 08:45</p> </li> </ul> </div>
css:
.odContent .tpinfo{ overflow: hidden; counter-reset:step; } .odContent .tpinfo li{ width: 20%; text-align: center; clear:none; border-top:none; list-style-type: none; text-transform: uppercase; float: left; position: relative; } .odContent .tpinfo li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #fff; background: #E8E8E8; border-radius: 3px; margin: 0 auto 5px auto; } /*progressbar connectors*/ .odContent .tpinfo li:after { content: ''; width: 100%; height: 2px; background: #E8E8E8; position: absolute; left: -50%; top: 18px; z-index: -1; /*put it behind the numbers*/ } .odContent .tpinfo li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ .odContent .tpinfo li.active:before, .odContent .tpinfo li.active:after{ background: #0099FF; color: white; } .odContent .tpinfo li p{ line-height:20px; font-size:14px;}
2.
html:
<div class="odContent"> <ul class="tpinfo"> <li class="box"> <span class="big blue"><b class="small blue-inner"></b></span> <span class="step">退票申请</span> <span class="time">2016-11-02 08:45</span> </li> <hr class="line1 line-blue"/> <li class="box middle"> <span class="big blue"><b class="small blue-inner"></b></span> <span class="step">退票受理中</span> <span class="time">2016-11-02 08:50</span> </li> <hr class="line2 line-gray"/> <li class="box"> <span class="big gray"><b class="small gray-inner"></b></span> <span class="step">退票完成</span> <span class="time">2016-11-02 21:45</span> </li> </ul> </div>
css:.odContent .tpinfo{ position: relative; height: 95px; /*border-bottom: 1px solid #DDDEE3;*/ /*border-top: 1px solid #DDDEE3;*/ /*background: #fff;*/ box-sizing: border-box; margin-left:30px; } .odContent .tpinfo li{ /*width: 20%;*/ float:left; text-align:center; clear:none; border-top:none; } .odContent .tpinfo li .big { margin-top: 15px; display: inline-block; vertical-align: middle; width: 23px; height: 23px; line-height: 23px; border-radius: 50%; text-align: center; } .odContent .tpinfo li .big .small { display: inline-block; vertical-align: middle; width: 9px; height: 9px; border-radius: 50%; } .odContent .tpinfo li .gray { background: rgba(149, 152, 159, 0.2); } .odContent .tpinfo li .gray .gray-inner { background: rgba(149, 152, 159, 0.9); } .odContent .tpinfo li .blue { background: rgba(51, 149, 255, 0.2); } .odContent .tpinfo li .blue .blue-inner { background: rgba(51, 149, 255, 0.6); } .odContent .tpinfo li .step { display: block; margin-top: 10px; font-size: 12px; color: #777E8C; } .odContent .tpinfo li .time { display: block; margin-top: 10px; font-size: 10px; color: #777E8C; } .odContent .tpinfo .middle { margin-left: 43px; margin-right: 44px; } .odContent .tpinfo .line1 { width: 74px; border-top: 1px solid #DDDEE3; position: absolute; top: 35px; left:80px; } .odContent .tpinfo .line2 { width: 74px; border-top: 1px solid #DDDEE3; position: absolute; top: 35px; left:227px; } .odContent .tpinfo .line-blue { /*background: #3395FF; */ border-top: 1px solid #3395FF; } .odContent .tpinfo .line-gray { /*background: #DDDEE3;*/ border-top: 1px solid #DDDEE3; }
声明:此文系舞林cuzn(www.wulinlw.org)原创稿件,转载请保留版权