css布局实现手机端移动端会员中心开通会员vip包月付费会员权益页面效果代码-html代码-BFW代码库

css布局实现手机端移动端会员中心开通会员vip包月付费会员权益页面效果代码

代码语言：html

代码描述：css布局实现手机端移动端会员中心开通会员vip包月付费会员权益页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>会员中心</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
    *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;font-style: normal;outline: none;-webkit-tap-highlight-color: transparent;}
body{width: 100%;overflow-x: hidden;background: url(//repo.bfw.wiki/bfwrepo/image/60d52c9e32795.png) top -.6rem left no-repeat #ffffff;background-size: 100% auto;color: #ffffff;}
img{vertical-align: middle;max-width: 100%;}
.container{width: 100%;padding: 0 .4rem;}
/*顶部*/
.top{width: 100%;height: auto;overflow: hidden;}
.top .title{display: flex;justify-content: center;align-items: center;width: 100%;height: .88rem;font-size: .34rem;letter-spacing: .01rem;}
.top span.more{position: absolute;right: .3rem;height:.88rem;width:.41rem;background: url(//repo.bfw.wiki/bfwrepo/image/60d52cc6d54aa.png) center center no-repeat;background-size: 100% auto;}
.top .more-box{display: none;background: #ffffff;position: absolute;top: .6rem;right: .3rem;padding: .15rem .35rem;border-radius: .05rem;font-size: .2rem;color: #333;box-shadow: 0 0 .1rem rgba(0,0,0,.1);}
.top .more-box a{display: block;line-height: .35rem;}
.top .type{width: 100%;padding: .2rem .85rem;}
.top .type ul{display: flex;justify-content: space-between;align-items: center;}
.top .type ul li{font-size: .32rem;letter-spacing: .03rem;position: relative;}
.top .type ul li.active{font-size: .4rem;}
.top .type ul li.active:after{content: "";position: absolute;display: inline-block;width: .3rem;height: .05rem;background: #FFFFFF;border-radius: .05rem;bottom: -.1rem;left: 50%;transform: translateX(-50%);}
.top .status{width: 100%;padding-top: 1.5rem;display: flex;flex-direction: column;}
.top .status span{font-size: .3rem;color: #b38a63;padding-left: 3.45rem;letter-spacing: .01rem;}
.top .status p{font-size: .24rem;color: #b08760;padding-top: .4rem;padding-left: .75rem;letter-spacing: .01rem;}
/*会员卡列表*/
.card-list{width: 100%;margin-top: .34rem;padding-bottom: .2rem;color: #333333;display: none;position: relative;}
.card-list::after{content: "";display: block;width: 100%;height: .2rem;background: #f6f7f6;bottom: 0;left: 0;}
.card-list.active{display: block;}
.card-list .cate{display: flex;justify-content: space.........完整代码请登录后点击上方下载按钮下载查看