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

webApp开发-2列布局

时间:2017-08-21 18:50:07      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:padding   amp   type   0.00   closed   lap   png   imp   开发   

html

技术分享
<div class="acc_item" id="acc_set">
     <div class="row bg_fff border_top">
         <div class="inner_item border_right col-50">
             <div class="con set item" ng-click="changeState(‘setting‘)">
                 <div class="ite">设置</div>
             </div>
         </div>
         <div class="inner_item col-50">
             <div class="con msg item" ng-click="changeState(‘myMessage‘)">
                 <div class="ite" ng-if="user.unreadcount == 0 ">我的消息</div>
                 <div class="ite">我的消息({{user.unreadcount}})</div>
                 <div class="ite" ng-if="user.unreadcount >99 ">我的消息(99+)</div>
             </div>
         </div>
     </div>
 </div>
View Code

 

技术分享
<div class="acc_item bg_fff m_t_10" id="acc_item">
     <div class="row  border_top">
         <div class="inner_item border_right col-50">
             <div class="con item wallet" ng-click="changeState(‘setting‘)">
                 <div class="ite2">我的钱包</div>
                 <div class="ite2">0.00 &nbsp;</div>
             </div>
         </div>
         <div class="inner_item col-50">
             <div class="con msg item ct" ng-click="changeState(‘myMessage‘)">
                 <div class="ite">我的卡券</div>
             </div>
         </div>
     </div>
     <div class="row  border_top">
         <div class="inner_item border_right col-50">
             <div class="con item order" ng-click="changeState(‘setting‘)">
                 <div class="ite2">我的订单</div>
                 <div class="ite2">&nbsp;4 &nbsp;</div>
             </div>
         </div>
         <div class="inner_item border_right col-50">
             <div class="con item bank" ng-click="changeState(‘setting‘)">
                 <div class="ite2">银行卡</div>
                 <div class="ite2">&nbsp;3 &nbsp;</div>
             </div>
         </div>
     </div>
 </div>
View Code

 

CSS

/* set */
#acc_set{
    margin-top:-10px;
}
.acc_item .set {
    background: url(../img/account/icon_01.png) no-repeat left center;
    background-size: auto 0.35rem;
}
.acc_item .msg {
    background: url(../img/account/icon_02.png) no-repeat left center;
    background-size: auto 0.35rem;
}
#acc_set .ite{
    margin-top:-0.16rem;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
#acc_set .inner_item{
    margin-top:0 !important;
}

/*  item 入口*/
#acc_item .con{
    display:block;
}
#acc_item .ite{
    margin-top:-0.16rem;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
#acc_item .inner_item .ite2{
    margin-top:-0.15rem;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
#acc_item .inner_item .ite2:nth-of-type(2){
    font-size:0.13rem !important;
    color: #999999 !important;
}
.acc_item .wallet{
    background: url(../img/account/icon_03.png) no-repeat left center;
    background-size: auto 0.35rem;
}

.order .ite2,
.bank .ite2{
    margin-top:-0.25rem !important;
    text-align:left;
    font-size: 0.14rem !important;
    color: #333333 !important;
}
.order .ite2:nth-of-type(2),
.bank .ite2:nth-of-type(2){
    padding-top:10px;
    font-size:0.13rem !important;
    color: #999999 !important;
}
.acc_item .ct {
    background: url(../img/account/icon_04.png) no-repeat left center;
    background-size: auto 0.35rem;
}
.acc_item .order {
    background: url(../img/account/icon_009.png) no-repeat left center;
    background-size: auto 0.35rem;
    margin-left: 0.10rem;
}
.acc_item .bank {
    background: url(../img/account/icon_08.png) no-repeat left center;
    background-size: auto 0.35rem;
}

 

webApp开发-2列布局

标签:padding   amp   type   0.00   closed   lap   png   imp   开发   

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

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