leoyi520

移动端个人中心样式

CSS

/*个人中心*/
.topIntroBox{
background: url("../images/p_01.jpg")no-repeat top center;
}
.topIntroBox .aboutMe{
width: 50px;
height: 60px;
margin: 0 auto;
}
.topIntroBox .aboutMe .aboutImg{
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: 65px;
background: url("../images/me.png")no-repeat top center;
}
.topIntroBox .aboutMe h3{
font-size: 14px;
text-align: center;
color:#fff;
}
.personBorder{
border-bottom: 2px solid #ccc;
padding-bottom: 4px;
margin-bottom: 10px;
}
.personBorder h3{
font-weight: 500;
margin-top: 10px;
font-size: 18px;
}
.personList h4 {
padding:5px 0;
margin-left: 8px;
}
.personList h4 a{
color:#888586;
}
.personList div{
height: 30px;
line-height: 30px;
margin-bottom: 5px;
}
.rightAll{
color:#777;
font-size: 15px;
}
.icon{
display: inline-block;
width: 20px;
height: 20px;
margin-top: 5px;
}
.icon-1{
background: url("../images/p_04.jpg")no-repeat center;
}
.icon-2{
background: url("../images/p_07.jpg")no-repeat center;
}
.icon-3{
background: url("../images/p_10.jpg")no-repeat center;
}
.icon-4{
background: url("../images/p_13.jpg")no-repeat center;
}
.ico-index{
display: inline-block;
width: 40px;
height: 40px;
margin-left: 10px;
margin-top: 5px;
}
.ico-index-1{
background: url("../images/p_17.jpg")no-repeat center;
}
.ico-index-2{
background: url("../images/p_19.jpg")no-repeat center;
}
.ico-index-3{
background: url("../images/p_21.jpg")no-repeat center;
}

/*兼容iphone5*/
@media screen and (max-width: 320px){
.topListBox{
top:15px;
left: 33%;
}
.topIntroBox{
height: 180px;
}
.personBottom{
padding-bottom: 150px;
}
.personBottom h4{
font-size: 15px;
}
}
/*兼容iphone6*/
@media screen and (min-width: 350px){
.topListBox{
top:40px;
left: 38%;
}
.topIntroBox{
height: 200px;
}
.personBottom h4{
font-size: 16px;
}
}

<div class="container" id="returnTop">
<!-- 头部 -->
<div class="row">
<div class="topIntroBox clear">
<a href="javascript:window.history.back(-1);" class="setBox" ></a>
<div class="aboutMe">
<div class="aboutImg"></div>
<h3>凉人</h3>
</div>
</div>
</div>
<!-- 个人中心头部 -->
<div class="row">
<div class="col-xs-12">
<!-- 成长值 -->
<div class="row">
<div class="col-xs-4 padding10 borderRight">
</div>
</div>
<!-- 列表 -->
<div class="row personList">
<div class="left10 personBorder">
<h3>我的收藏</h3>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-1 fl"></span>
<h4 class="fl"><a href="#">商品收藏</a></h4>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-2 fl"></span>
<h4 class="fl"><a href="#">商家收藏</a></h4>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-3 fl"></span>
<h4 class="fl"><a href="#">圈子收藏</a></h4>
<span class="fr rightAll">></span>
</div>
<div class="col-xs-12 clear">
<span class="icon icon-4 fl"></span>
<h4 class="fl"><a href="#">资讯收藏</a></h4>
<span class="fr rightAll">></span>
</div>

</div>

</div>
</div>
<!-- 列表 -->
<div class="row personList personBottom">
<div class="left10 personBorder">
<h3>我的店铺</h3>
</div>
<ul class="nav-list-box clear">
<li><a href="detail.html">
<span class="ico-index ico-index-1"></span>
<h4>我的商铺</h4>
</a></li>
<li><a href="#">
<span class="ico-index ico-index-2"></span>
<h4>发布产品</h4>
</a></li>
<li><a href="index.html">
<span class="ico-index ico-index-3"></span>
<h4>后台登录</h4>
</a></li>
</ul>
</div>

</div><!-- container结束 -->