css实现手机端签到页面每日签到效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现手机端签到页面每日签到效果代码,使用了zepto
下面为部分代码预览,完整代码请点击下载或在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; } body { width: 100%; overflow-x: hidden; background: url(//repo.bfw.wiki/bfwrepo/image/609f093672ace.png) top center no-repeat #FFFFFF; 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; } .bg-blue { background: #0068ff; } .text-blue { color: #289ef4!important; } .text-yellow { color: #ffa33e!important; } .btn { color: #FFFFFF; height: 1rem; line-height: 1rem; text-align: center; font-size: .3rem; border-radius: .05rem; outline: none; } .wfull { width: 100%; } .top-title { position: absolute; top: .2rem; left: 0; width: 100%; font-size: .32rem; color: #FFFFFF; text-align: center; } /*签到*/ .sign-in { margin: 3.2rem .22rem 0 .22rem; position: relative; } .sign-in .line {} .sign-in .sign-info { display: flex; flex-direction: column; align-items: center; } .sign-in .sign-info>div { display: flex; justify-content: space-between; width: 100%; } .sign-in .sign-info .score { font-size: .18rem; color: #c2d1e9; margin-top: .6rem; padding: 0 .55rem;.........完整代码请登录后点击上方下载按钮下载查看
网友评论0