webApp开发-图标开关 _App开发

逆水行舟用力撑，一篙松劲退千寻。这篇文章主要讲述webApp开发-图标开关相关的知识，希望能为你提供帮助。
html

文章图片

< div class="bg_fff step"ng-if="ifshowKh !=‘1‘"> < ul class="rowstep_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>

View Code

文章图片

< div class="bg_fff step"ng-if="ifshowKh==‘1‘"> < ul class="rowstep_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>

View Code【webApp开发-图标开关】
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; }

View Code

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