码迷,mamicode.com
首页 > 移动开发 > 详细

webApp开发-图标开关

时间:2017-08-22 10:31:31      阅读:268      评论:0      收藏:0      [点我收藏+]

标签: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开发-图标开关

标签:closed   ng-if   enter   png   2.0   close   1.0   nbsp   lin   

原文地址:http://www.cnblogs.com/alan-alan/p/7409921.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!