前段时间利用jQuery mobile做了一个手机APP个人中心界面，话不多说直接展示代码。
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
}
.my-info-background {
position: relative;
width: 100%;
min-height: 150px;
overflow: hidden;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff0000), color-stop(1, #ff0000));
}
.my-info .my-avatar {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
border-radius: 50%;
border: solid 2px rgba(255, 255, 255, 0.7);
}
.my-info .my-vip {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 24px;
margin-left: -100px;
margin-top: 110px;
line-height: 24px;
/* margin: 45px 0 0 -100px; */
padding: 0 4px;
border-radius: 3px;
text-align: center;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.2);
}
/* #con ul li{
float: left;
list-style: none;
}*/
#con #nav img {
margin-left: 13px;
display: block;
width: 30px;
}
#con #nav a {
display: inline-block;
width: 60px;
text-decoration: none;
}
#con #nav li,
#con #nav a {
background-color: #fff;
border: none;
}
ul #oul {
box-shadow: none;
background-color: #fff;
}
#oul li,
#oul a {
background-color: #fff;
display: block;
font-size: 14px;
border: none;
padding-top: 10px;
padding-bottom: 10px;
}
#oul #dive {
border-top: 5px solid #ccc;
}
</style>
</head>
<body>
<div data-role="page" id="pageone" style="background-color: #fff;">
<div data-role="header" class="my-info">
<div class="my-info-background">
<img class="my-avatar" src="statics/img/p416231676.webp">
</div>
</div>
<div data-role="main" class="ui-content" id="con">
<div data-role="navbar" id="nav">
<ul>
<li>
<a href="#"><img src="statics/img/m-8.png" />
<span class="img-icon-name">收藏</span></a>
</li>
<li>
<a href="#"><img src="statics/img/m-3.png" />
<span class="img-icon-name">退款/售后</span></a>
</li>
<li>
<a href="#"><img src="statics/img/m-6.png" />
<span class="img-icon-name">订阅店铺</span></a>
</li>
<li>
<a href="#"><img src="statics/img/m-4.png" />
<span class="img-icon-name">足迹</span></a>
</li>
</ul>
<ul>
<li>
<a href="#"><img src="statics/img/m-5.png" />
<span class="img-icon-name">待付款</span></a>
</li>
<li>
<a href="#"><img src="statics/img/m-7.png" />
<span class="img-icon-name">待发货</span></a>
</li>
<li>
<a href="#"><img src="statics/img/m-1.png" />
<span class="img-icon-name">待收货</span></a>
</li>
<li>
<a href="#"><img src="statics/img/m-2.png" />
<span class="img-icon-name">待评价</span></a>
</li>
</ul>
</div>
<ul data-role="listview" data-inset="true" id="oul">
<li><a href="#"><img src="statics/img/m-11%20(1).png" class="ui-li-icon">
会员中心</a></li>
<li><a href="#"><img src="statics/img/m-11%20(2).png" class="ui-li-icon">
会员中心</a></li>
<li><a href="#"><img src="statics/img/m-11%20(3).png" class="ui-li-icon">
会员中心</a></li>
<li><a href="#"><img src="statics/img/m-11%20(4).png" class="ui-li-icon">
会员中心</a></li>
<!-- <li id="dive"><a href="#"><img src="../2-Order/img/m-11%20(2).png" class="ui-li-icon">
会员中心</a></li> -->
<li id="dive"><a href="#"><img src="statics/img/m-10.png" class="ui-li-icon">
退出</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
图片展示：