css布局实现手机端移动端个人会员中心积分兑换页面代码-html代码-BFW代码库

css布局实现手机端移动端个人会员中心积分兑换页面代码

代码语言：html

代码描述：css布局实现手机端移动端个人会员中心积分兑换页面代码

下面为部分代码预览，完整代码请点击下载或在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/images/app/me/top-bg.jpg) top center no-repeat #ffffff;background-size: 100% auto;}
    img{vertical-align: middle;max-width: 100%;}
    .top-bar{width: 100%;height: .88rem;line-height: .88rem;text-align: center;position: relative;font-size: .32rem;color: #ffffff;}
    .top-bar a.back{width: .5rem;height: .88rem;position: absolute;top: 0;left: .3rem;z-index: 2;font-weight: bold;background: url(//repo.bfw.wiki/bfwrepo/images/app/me/icon-back.png) left center no-repeat;background-repeat: no-repeat;background-size: .17rem auto;}
    .top-bar span{letter-spacing: .02rem;}
    /* 个人信息 */
    .person-info{width: 100%;padding: .2rem .5rem .8rem .5rem;}
    .person-info .head{padding: 0 .45rem;width: 100%;display: flex;align-items: center;padding-top: .35rem;}
    .person-info .head img{width: .84rem;height: .84rem;flex-shrink: 0;margin-right: .22rem;}
    .person-info .head .info {display: flex;flex-direction: column;justify-content: center;}
    .person-info .head .info p{font-size: .24rem;color: #f3d192;font-weight: bold;}
    .person-info .head .info span{font-size: .22rem;color: #f3d192;padding-top: .1rem;}
    .person-info .head button{width: .9rem;height: .45rem;border-radius: .45rem;background: linear-gradient(to right,#e0bf7a,#c79f49);font-size: .22rem;color: #232e35;align-self: flex-end;margin-bottom: .05rem;margin-left: .4rem;}
    .person-info .statistical{width: 100%;display: flex;justify-content: space-between;padding-top: .55rem;padding-left: .5rem;padding-right: .5rem;}
    .person-info .statistical>div{width: 2rem;display: flex;flex-direction: column;align-items: center;jus.........完整代码请登录后点击上方下载按钮下载查看