webApp开发-图标开关

html

<div class="bg_fff step"  ng-if="ifshowKh !=‘1‘">
<ul class="row  step_icon3" id="step_icon3">
    <li class="item step_type_1_off"></li>
    <div class="line col-20"></div>
    <li class="item step_type_2_on"></li>
    <div class="line col-20"></div>
    <li class="item step3_type_3_off"></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>

<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>

css1.0

/*  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{

}
.step_desc4 li.item{
    font: inherit;
    font-size: 100%;
    padding:0px;
    height:32px;
    line-height:32px;

}

CSS2.0

/* 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 */

.step3_type_1_on{
    background:url(../img/find_pw_on_1.png)  no-repeat center right !important;
    background-size: 27px auto !important;
}
.step3_type_1_off{
    background:url(../img/find_pw_off_1.png)  no-repeat center right !important;
    background-size: 27px auto !important;
}
.step3_type_2_on{
    background:url(../img/find_pw_on_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step3_type_2_off{
    background:url(../img/find_pw_off_2.png)  no-repeat center center !important;
    background-size: 27px auto !important;
}
.step3_type_3_on{
    background:url(../img/icon_s1-3.png)  no-repeat center left !important;
    background-size: 27px auto !important;
}
.step3_type_3_off{
    background:url(../img/icon_s3.png)  no-repeat center left !important;
    background-size: 27px auto !important;
}