css布局手机端每日签到领积分h5页面效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局手机端每日签到领积分h5页面效果代码
下面为部分代码预览,完整代码请点击下载或在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; } body { width: 100%; overflow-x: hidden; background: url(//repo.bfw.wiki/bfwrepo/images/qiandao/bg.jpg) top center no-repeat #f5f5f5; background-size: 100%; } img { vertical-align: middle; max-width: 100%; } a:hover,a:active,a:visited,a:link,a:focus { -webkit-tap-highlight-color: transparent; outline: none; text-decoration: none; } .red { color: #ff2d23; } .container { width: 100%; padding: .4rem .2rem; } /*顶部*/ .top-bar { display: flex; justify-content: space-between; align-items: center; color: #FFFFFF; } .top-bar i { display: inline-block; width: 1rem; height: .5rem; background: url(//repo.bfw.wiki/bfwrepo/images/qiandao/icon-left.png) left center no-repeat; background-size: auto .40rem; } .top-bar span { font-size: .36rem; } .top-bar a { font-size: .26rem; } /*积分面板*/ .jf-panel { width: 100%; padding-top: .85rem; padding-right: .35rem; } .jf-panel .dj { float: right; display: flex; justify-content: flex-end; align-items: center; font-size: .25rem; background: #fed4b7; border-radius: .42rem; } .jf-panel .dj img { width: .42rem; height: .42rem; } .jf-panel .dj span { padding: 0 .25rem 0 .14rem; } .jf-panel .jf { padding-top: .3rem; display: flex; justify-content: center; align-items: flex-end; width: 100%; padding-bottom: .48rem; } .jf-panel .jf label { font-size: .26rem; } .jf-panel .jf span { font-size: .88rem; line-height: .70rem; padding-right: .3rem; padding-left: .05rem; } .jf-panel .jf a { font-size: .24rem; padding: .05rem .42rem .06rem .18rem; background: url(//repo.bfw.wiki/bfwrepo/images/qiandao/icon-right.png) right .14rem center no-repeat #ff2d23; background-size: auto .23rem; color: #FFFFFF; border-radius: .34rem; } .jf-panel .sigin-btn { width: 4.32rem; height: .94rem; margin: 0 auto; display: flex; justify-content: center; align-items: center; font-size: .32rem; background: url(//repo.bfw.wiki/bfwrepo/images/qiandao/btn-bg.png) center center no-repeat; background-size: 100% 100%; letter-spacing: .03rem; } /*签到面板*/ .qd-panel { width: 100%; border-radius: .20rem; background: #FFFFFF; margin-top: .25rem; padding: .3rem; } .qd-panel h3 { font-size: .32rem; color: #333333; font-weight: bold; padding: .1rem 0 .28rem 0; } .qd-panel h3 span { font-weight: bold; padding: 0 .02rem; } .qd-panel ul { display: flex; justify-content: space-between; } .qd-panel ul li { width: .82rem; height: 1.12rem; display: flex; flex-direction: column; align-items: center; background: #f5f5f5; border-radius: .1rem; } .qd-panel ul li i { font-size: .2rem; display: inline-block; width: .5rem; height: .5rem; line-height: .5rem; background: #e6e6e6; border-radius: 50%; text-align: center; margin-top: .12rem; margin-bottom: .08rem; color: #333; } .qd-panel ul li span { font-size: .22rem; color: #888888; } .qd-panel ul li.active { width: .87rem; height: 1.26rem; background: url(//repo.bfw.wiki/bfwrepo/images/qiandao/sigin-active-bg.png) center center no-repeat; background-size: .87rem 1.26rem; } .qd-panel ul li.active i { color: #ff8900; background: none; padding-right: .05rem; } .qd-panel ul li.active span { color: #FFFFFF; } .qd-panel .rule { padding-top: .26rem; padding-bottom: .1rem; width: 100%; display: flex; justify-content: space-between; color: #333333; font-size: .28rem; } .qd-panel .rule a { height: .34rem; display: inline-block; padding-left: .45rem; background: url(//repo.bfw.wiki/bfwrepo/images/qiandao/icon-info.png) left center no-repeat; background-size: .34rem; } .qd-panel .rule p { display: flex; } .qd-panel .rule p span { display: inline-block; width: .8rem; height: .36rem; background: #ff2d23; margin-left: .1rem; border-radius: .36rem; position: relative; } .qd-panel .rule p span:after { content: ""; display: block; width: .32rem; height: .32rem; border-radius: 50%; background: #FFFFFF; position: absolute; right: .02rem; top: .02rem; box-shadow: 0 0 .02rem rgba(0,0,0,.8); } .qd-panel .rule p span.close { background: #e6e6e6; } .qd-panel .rule p span.close:after { right: auto; left: .02rem; box-shadow: 0 0 .02rem rgba(0,0,0,.2); } /*快捷导航*/ .quick-nav { padding: .4rem .65rem; width: 100%; border-radius: .20rem; background: #FFFFFF; margin-top: .2rem; } .quick-nav ul { display: flex; justify-content: space-between; } .quick-nav ul li a { display: flex; align-items: center; justify-content: center; flex-direction: column; } .quick-nav ul li img { width: 1rem; height: 1rem; } .quick-nav ul li p { font-size: .28rem; color: #333333; padding-top: .25rem; } /*任务列表*/ .task { padding: .3rem .2rem 0 .2rem; width: 100%; border-radius: .20rem; background: #FFFFFF; margin-top: .2rem; } .task .title { width: 100%; display: flex; justify-content: center; align-items: center; font-size: .32rem; color: #333333; padding-bottom: .3rem; border-bottom: .01rem solid #f6f6f6; } .task .title i { display: inline-block; width: .38rem; height: .26rem; margin: 0 .45rem; background: url(//repo.bfw.wiki/bfwrepo/images/qiandao/title-bg.png) center center no-repeat; background-size: .38rem .26rem; } .task ul li { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: .46rem 0; border-bottom: .01rem solid #f6f6f6; } .task ul li:last-child { border-bottom: none; } .task ul li img { flex-shrink: 0; display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .2rem; } .task ul li a { flex-shrink: 0; display: inline-block; width: 1.4rem; height: .46rem; line-height: .46rem; text-align: center; background: #fff4ca; color: #c8882f; font-size: .28rem; border-radius: .46rem; } .task .........完整代码请登录后点击上方下载按钮下载查看
网友评论0