jquery mobile创建个人中心界面

前段时间利用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>

图片展示:
jquery mobile创建个人中心界面_第1张图片

你可能感兴趣的:(jquery,mobile,jquery,css,html5)