leoyi520

个人中心列表页效果

CSS：

/*兼容iphone5*/
@media screen and (max-width: 320px){
.foodBox .leftfood{
width: 40%;
}
.foodBox .rightIntro{
width: 57%;
}
.orderList li{
float: left;
width: 33.33%;
background: #7A3635;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.topChoice{
margin-left: 96px;
}
}
/*兼容iphone6*/
@media screen and (min-width: 350px) and (max-width: 400px){
.foodBox .leftfood{
width: 35%;
}
.foodBox .rightIntro{
width: 64%;
}
.orderList li{
float: left;
width: 33.33%;
background: #7A3635;
text-align: center;
font-weight: bold;
font-size: 12px;
}
.topChoice{
margin-left: 120px;
}
}
/*个人中心*/
.setBox{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
top:8px;
right: 10px;
background: url("../images/g_03.png")no-repeat;
}
.ico-set{
display: inline-block;
width: 30px;
height: 30px;
position: absolute;
top:8px;
right: -30px;
background: url("../images/g_05.png")no-repeat;
}
.borderRight{
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
background: url("../images/define-user.png")no-repeat top center;
margin: 10px 0 10px 10px;
}
.userTop{
margin-top: 20px;
}
/*订单状态列表*/
.orderList li a{
display: block;
width: 100%;
height: 100%;
color:#fff;
}
.ico-order{
display: inline-block;
width: 35px;
height: 35px;
margin-top: 5px;
}
.orderList li p{
padding-top: 5px;
margin-top: -5px;
margin-bottom: 0;
}
.right{
border-right: 1px solid #fff;
}
.ico-order-1{
background: url('../images/g_10.jpg')no-repeat;
}
.ico-order-2{
background: url('../images/g_12.jpg')no-repeat;
}
.ico-order-3{
background: url('../images/g_14.jpg')no-repeat;
}
.ico-order-4{
background: url('../images/g_16.jpg')no-repeat;
}
/*个人中心的列表*/
.personList{
height:35px;
line-height: 35px;
}
.personList div{
font-weight: bold;
border-bottom: 1px solid #ccc;
}
.personList div a{
display: block;
width: 100%;
height: 100%;
font-weight: bold;
color:#333;
text-decoration: none;
}
.personList h3{
color: #666;
font-size: 14px;
font-weight: normal;
float: left;
padding-top: 10px;
}
.rightAll{
float: right;
color: #333;
}
.person-list{
margin-top: 10px;
}
.person-list li{
width: 100%;
background: #EAEAEA;
margin-bottom: 10px;
padding:5px 15px;
}
.person-list li a{
color:#333;
}
.person-list h4{
font-size: 14px;
line-height: 30px;
font-weight: bold;
}

<div class="container" id="returnTop">
<!-- 头部 -->
<div class="row">
<div class="topBox clear">
<a href="javascript:window.history.back(-1);" class="ico-return"></a>
<h4 class="text-center white" style="line-height: 40px;">个人中心</h4>
<a href="javascript:void(0);" id="showNav" is='0' class="setBox"></a>
</div>
</div>
<!-- 个人中心头部 -->
<div class="row">
<div class="col-xs-12">
<!-- 成长值 -->
<div class="row" style="background: #F56D6B;">
<div class="col-xs-5 padding10 borderRight">
</div>
<div class="col-xs-7">
<h4 style="margin-top: 25px;">昨天</h4>
<div class="userTop clear">
<a href="#" class="ico-set fr"></a>
</div>
</div>
</div>
</div>
</div>
<div class="row orderList clear">
<ul class="clear">
<li><a href="#">
<p class="right">收藏的项目<br>1</p>
</a></li>
<li><a href="#">
<p class="right">收藏的影像<br>0</p>
</a></li>
<li><a href="#">
<p>我的足迹<br>1</p>
</a></li>
</ul>
</div>


<!-- 列表 -->
<div class="row personList">
<div class="col-xs-12 clear">
<h3 class="fl"><a href="#">我的通知</a></h3>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 bg-white clear">
<h3 class="fl"><a href="#">我的捐款</a></h3>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 bg-white clear">
<h3 class="fl"><a href="#">我的钱包</a></h3>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 bg-white clear">
<h3 class="fl"><a href="#">安全中心</a></h3>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 bg-white clear">
<h3 class="fl"><a href="#">绑定银行卡</a></h3>
<span class="fr rightAll">></span>
</div>
</div>
</div><!-- container结束 -->
<div class="container">
<div class="row">
<ul class="person-list clear">
<li class="clear"><a href="#">
<h4 class="fl"><a href="#">推荐给好友</a></h4> <span class="fr rightAll">></span>
</a></li>
<li class="clear"><a href="#">
<h4 class="fl"><a href="#">更多服务</a></h4> <span class="fr rightAll">></span>
</a></li>
</ul>
</div>
</div>