webApp開發-表徵圖開關

標籤：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開發-表徵圖開關