webApp开发-2列布局

一年好景君须记，最是橙黄橘绿时。这篇文章主要讲述webApp开发-2列布局相关的知识，希望能为你提供帮助。
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="rowborder_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="rowborder_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列布局】