演示网站 会员中心首页样式h5模板
编写代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会员中心首页样式h5模板</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
<script src="statics/js/flexible.js" type="text/javascript" charset="utf-8"></script>
<script src="statics/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--返回-->
<div class="top">
<i></i>会员中心
</div>
<!--个人信息-->
<div class="info-card">
<div class="user">
<img src="statics/images/head.png" />
<div class="name">
<p>模板库</p>
<span>升级至尊会员享额外特权</span>
</div>
</div>
<div class="info">
<div class="item">
<p>积分</p>
<span>0</span>
</div>
<div class="item">
<p>金币</p>
<span>920</span>
</div>
<div class="item">
<p>优惠券</p>
<span>3</span>
</div>
</div>
</div>
<!--会员充值-->
<h5 class="title">会员充值</h5>
<div class="hycz">
<ul>
<li class="active">
<div class="desc">
<p class="type">12个月</p>
<p class="money"><span>￥</span>88</p>
<div class="remark">
<p>到期自动续费</p>
<p>可随时关闭</p>
</div>
</div>
<div class="limit">
限时特价 送豪礼
</div>
</li>
<li>
<div class="desc">
<p class="type">1个月</p>
<p class="money"><span>￥</span>15</p>
<div class="remark">
<p>联合月卡</p>
</div>
</div>
</li>
<li>
<div class="desc">
<p class="type">连续包月</p>
<p class="money"><span>￥</span>10</p>
<div class="remark">
<p>到期自动续费</p>
<p>可随时关闭</p>
</div>
</div>
</li>
<li>
<div class="desc">
<p class="type">连续包年</p>
<p class="money"><span>￥</span>68</p>
<div class="remark">
<p>到期自动续费</p>
<p>可随时关闭</p>
</div>
</div>
</li>
<div class="holder"></div>
</ul>
<div class="btn">
<button id="pay">立即升级</button>
<p>升级得800金币</p>
</div>
</div>
<h5 class="title">会员特权</h5>
<div class="hytq">
<ul>
<li>
<img src="statics/images/icon-jinbi.png" />
<p>每日金币</p>
</li>
<li>
<img src="statics/images/icon-shenjuan.png" />
<p>大额神券</p>
</li>
<li>
<img src="statics/images/icon-fanli.png" />
<p>更多返利</p>
</li>
<li>
<img src="statics/images/icon-shangpin.png" />
<p>精选商品</p>
</li>
<li>
<img src="statics/images/icon-jisu.png" />
<p>极速到账</p>
</li>
<li>
<img src="statics/images/icon-fenxiang.png" />
<p>分享赚</p>
</li>
<li>
<img src="statics/images/icon-huodong.png" />
<p>专享活动</p>
</li>
<li>
<img src="statics/images/icon-shengri.png" />
<p>生日折扣</p>
</li>
<li>
<img src="statics/images/icon-tixing.png" />
<p>上架提醒</p>
</li>
<li>
<img src="statics/images/icon-kefu.png" />
<p>专属客服</p>
</li>
</ul>
</div>
</body>
<!--下面是无用代码-->
<div style="display:none">
<a href="http://www.bootsTrapmb.com">更多前端代码</a>
</div>
</html>
<script type="text/javascript">
$('.hycz ul li').click(function () {
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.hycz ul').scrollLeft($(this).width() * index)
})
$('#pay').click(function () {
var type = $('.hycz ul li.active').find('.type').text();
var money = $('.hycz ul li.active').find('.money').text();
confirm("确定要充值" + type + "会员吗？" + "价值：" + money.substr(1) + "元")
})
</script>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
