webApp开发-流程步骤展示

 

html

<div class="bg_fff step"  ng-if="ifshowKh !='1'">

<ul class="row  step_icon3" id="step_icon3">
    <li class="item"></li>
    <div class="line col-20"></div>
    <li class="item"></li>
    <div class="line col-20"></div>
    <li class="item"></li>
</ul>
<ul class="row step_desc3" id="step_desc3">
    <li class="item col-30">基本信息</li>
    <li class="item col-30">申请信息</li>
    <li class="item col-30">影像上传</li>
</ul>
    

<div class="bg_fff step"  ng-if="ifshowKh=='1'">

<ul class="row  step_icon4" id="step_icon4">
    <li class="item"></li>
    <div class="line col-15"></div>
    <li class="item"></li>
    <div class="line col-15"></div>
    <li class="item"></li>
    <div class="line col-15"></div>
    <li class="item col-5"></li>
</ul>
<ul class="row step_desc4" id="step_desc4">
    <li class="item col-25">基本信息</li>
    <li class="item col-25">申请信息</li>
    <li class="item col-25">补充资料</li>
    <li class="item col-25">影像上传</li>
</ul>

</div>

CSS

/* ionic */
.col-10 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 10%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 10%;
  -ms-flex: 0 0 10%;
  flex: 0 0 10%;
  max-width: 10%; }
.col-15 {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 10%;
  -moz-box-flex: 0;
  -moz-flex: 0 0 15%;
  -ms-flex: 0 0 15%;
  flex: 0 0 15%;
  max-width: 15%; }



/*--main--*/


/*  step_icon3 */
.step_icon3{
     padding: 10px 20px;
}
.line{
    width: 80px;
    border-top:1px solid #0076C1;
    margin-top:20px;
}
.step_icon3 li.item{
    width: 30%;
    height: 40px;
    text-align: center;
    padding-top: 10px;
}
.step_icon3 li.item:nth-of-type(1){
    background:url(../img/find_pw_on_1.png)  no-repeat center right;
    background-size: 27px auto;
}

.step_icon3 li.item:nth-of-type(2){
    background:url(../img/find_pw_off_2.png)  no-repeat center center;
    background-size: 27px auto;
}
.step_icon3 li.item:nth-of-type(3){
    background:url(../img/icon_s3.png)  no-repeat center left;
    background-size: 27px auto;
}
.step_desc3 li.item{
    font: inherit;
    font-size: 100%; 
    padding:0px;
    height:32px;
    line-height:32px;
    padding-left:30px;
    
}


/*  step_icon4 */
.step_icon4{
     padding:20px;
}
.step_icon4 div.line{
    
}

.line{
    width: 80px;
    border-top:1px solid #0076C1;
    margin-top:20px;
}
.step_icon4 li.item{
    width: 30%;
    height: 40px;
    text-align: center;
    padding-top: 10px;
}
.step_icon4 li.item:nth-of-type(1){
    background:url(../img/find_pw_on_1.png)  no-repeat center right;
    background-size: 27px auto;
}

.step_icon4 li.item:nth-of-type(2){
    background:url(../img/find_pw_off_2.png)  no-repeat center center;
    background-size: 27px auto;
}
.step_icon4 li.item:nth-of-type(3){
    background:url(../img/icon_s3.png)  no-repeat center center;
    background-size: 27px auto;
}
.step_icon4 li.item:nth-of-type(4){
    background:url(../img/icon_s4.png)  no-repeat center left;
    background-size: 27px auto;
}
.step_desc4 li.item{
    font: inherit;
    font-size: 100%; 
    padding:0px;
    height:32px;
    line-height:32px;
    
}

 

CSS2

/* step on/off  */

.step_type_1_on{
    background:url(../img/find_pw_on_1.png)  no-repeat center right !important;
    background-size: 27px auto !important;
}
.step_type_1_off{
    background:url(../img/find_pw_off_1.png)  no-repeat center right !important;
    background-size: 27px auto !important;
}
.step_type_2_on{
    background:url(../img/find_pw_on_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step_type_2_off{
    background:url(../img/find_pw_off_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step_type_3_on{
    background:url(../img/icon_s1-3.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step_type_3_off{
    background:url(../img/icon_s3.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step_type_4_on{
    background:url(../img/icon_s1-4.png)  no-repeat center right !important;
    background-size: 27px auto;
}
.step_type_4_off{
    background:url(../img/icon_s4.png)  no-repeat center right !important;
    background-size: 27px auto;
}

/* group2 */

.step_type_1_on{
    background:url(../img/find_pw_on_1.png)  no-repeat center right !important;
    background-size: 27px auto !important;
}
.step_type_1_off{
    background:url(../img/find_pw_off_1.png)  no-repeat center right !important;
    background-size: 27px auto !important;
}
.step_type_2_on{
    background:url(../img/find_pw_on_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step_type_2_off{
    background:url(../img/find_pw_off_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step_type_3_on{
    background:url(../img/icon_s1-3.png)  no-repeat center left !important;
    background-size: 27px auto !important;
}
.step_type_3_off{
    background:url(../img/icon_s3.png)  no-repeat center left !important;
    background-size: 27px auto !important;
}