mui实现一个手机端移动端个人中心页面效果代码
代码语言:html
所属分类:布局界面
代码描述:mui实现一个手机端移动端个人中心页面效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mui.min.css"> <script type="text/javascript"> !(function (doc, win) { var el = doc.documentElement; //resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; function setSize() { var w = el.clientWidth; if (!w) return; w = w > 480?480: w; w = w < 320?320: w; el.style.fontSize = (100 * (w / 1080)).toFixed(3) + 'px'; } if (!doc.addEventListener) return; setSize(); win.addEventListener('resize', setSize, false); win.addEventListener('pageshow', function(e) { if (e.persisted) { setSize(); } }, false); })(document, window); </script> <style> @charset "UTF-8"; /*原子类*/ .db { display: block; } .ra3 { -webkit-border-radius: 3px; border-radius: 3px; } /*样式类*/ /*功能类*/ /** flex宸ュ叿 */ .mui-bar-nav { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: .36rem; } .mui-bar-nav .back-btn { position: relative; z-index: 11; display: block; margin: 0 .15rem; /*padding: 0 .25rem;*/ color: #525252; font-size: .5rem; /* height: 1.44rem; line-height: 1.44rem; */ } /*首页*/ /*分类页面*/ /*明星同款*/ /*# sourceMappingURL=all.css.map */ /* CSS Document */ /* author:cyy */ /*css reset*/ * { margin: 0; padding: 0; } html,body { width: 100%; } body { overflow: -Scroll; overflow-x: hidden; } body { font-family: "微软雅黑"; } /*移动端*/ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } header { display: block; } a { background-color: transparent; } a:active,a:hover { outline: 0; } img { border: 0; } svg:not(:root) { overflow: hidden; } img { border: 0 } ul { list-style: none; } a { text-decoration: none; outline: none; } a:hover { outline: none; } a { -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255,0,0,0); } /* 1.去除android a/button/input标签被点击时产生的边框 2.去除ios a标签被点击时产生的半透明灰色背景 */ /*解决firefox按钮文字难以垂直居中问题*/ .fl { float: left; display: inline; } .fr { float: right; display: inline; } .clearfloat:after { display: block; clear: both; content: ""; visibility: hidden; height: 0 } .clearfloat { zoom: 1 } .box-s { box-sizing: border-box; -webkit-box-sizing: border-box; } html { font-size: 10px } @media screen and (min-width:321px) and (max-width:375px) { html { font-size: 11px }} @media screen and (min-width:376px) and (max-width:414px) { html { font-size: 12px }} @media screen and (min-width:415px) and (max-width:639px) { html { font-size: 15px }} @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px }} @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px }} @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px }} @media screen and (min-width:800px) { html { font-size: 25px }} a:hover { text-decoration: none; } .warp { margin-top: 1.4rem; } .h-top { position: relative; width: 100%; height: 6.8rem; /* background-color: #25cb83; */ /* background: url(../img/text-bck.png) no-repeat center; */ padding: 0.4rem; } .h-top .ge-back img { width: 100%; height: 100%; display: block; margin: 0 auto; } .mui-tus { position: absolute; bottom: 77px; padding: 0 0.6rem; } .huiyuan-text { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .h-top img { width: 23%; } .h-top .content { width: 60%; margin-left: 5%; padding-top: 20px; } .mui-tus ul { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: space-between; -webkit-justify-content: center; margin-top: 8%; } .mui-tus ul li { /* width: 33.333%; */ margin-left: 20px; text-align: center; } .mui-tus ul li:last-child { border-right: none; } .mui-tus ul li p { color: #fff; font-size: 0.5rem; } .mui-tus ul li span { color: #b3daff; font-size: 0.4rem; } .mui-tus ul .right-lines { height: 0.8rem; margin-top: 0.3rem; margin-left: 20px; border: 0.01rem solid #e2e2e2; } .swiper-text { height: 1rem; line-height: 1rem; padding: 0 0.4rem; margin-bottom: 4%; background: #fff; } .four-text { background: #fff; padding: 0.5rem 0.4rem; margin-bottom: 4%; } .four-text ul { display: flex; justify-content: space-between; -webkit-justify-content: center; } .four-text ul li { width: 48%; border-radius: 4px; padding: 20px 12px; } .four-ul { margin-bottom: 12px; } .four-text ul li .box-text p { display: inline-block; color: #fff; font-size: 0.48rem; } .aidou-text { display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; } .four-text ul li .box-text_2 { padding-left: 0.4rem; margin-top: 0.3rem; } .four-text ul li .box-text_2 p { font-size: 0.4rem; color: #fff; } .four-text ul li i { display: inline-block; width: 34px; height: 34px; margin: 0 auto; background: #fff; border-radius: 50%; text-align: center; line-height: 34px; font-size: 20px; } .cashlist { width: 100%; margin-bottom: 4%; background-color: #fff; } .cashlist ul li { width: 100%; height: 1.4rem; line-height: 1.4rem; padding: 0 0.4rem; border-bottom: 1px solid #EEEEF1; } .cashlist ul li a { display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; justify-content: space-between; height: 100%; width: 100%; } .cashlist ul li a p i { margin-right: 0.15rem; } .cashlist ul li p { font-size: .48rem; color: #696974; } .cashlist ul li i { color: #696974; font-size: 0.45rem; } .center-btn { width: 96%; margin: 0 auto 5%; text-align: center; height: 1.2rem; line-height: 1.2rem; background-color: #4C82FF; color: #fff; font-size: .48rem; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } .vip-s { font-size: 0.68rem; vertical-align: middle; } .vip-span { font-size: 0.4rem; color: #696974; } .vip-kai { color: #fff; font-size: 0.4rem; border: 1px solid #4C82FF; height: 0.6rem; line-height: 0.6rem; background: #4C82FF; padding: 0 0.2rem; margin-top: 8px; } .vip-kai:active,.vip-kai:focus,.vip-kai:hover { color: #FFF; } @charset "UTF-8"; /*原子类*/ .db { display: block; } .ra3 { -webkit-border-radius: 3px; border-radius: 3px; } /*样式类*/ /*功能类*/ /** flex宸ュ叿 */ .mui-bar-nav { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; font-size: .36rem; } .mui-bar-nav .back-btn { position: relative; z-index: 11; display: block; margin: 0 .15rem; /*padding: 0 .25rem;*/ color: #525252; font-size: .5rem; /* height: 1.44rem; line-height: 1.44rem; */ } /*首页*/ /*分类页面*/ /*明星同款*/ .fa-angle-right { margin-top: 24px; } </style> </head> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0