標籤:closed ng-if enter png 2.0 close 1.0 nbsp lin
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>
View Code
<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>
View Code
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;}
webApp開發-表徵圖開關