css+div实现简洁手机端登录表单页面代码
代码语言:html
所属分类:表单美化
代码描述:css+div实现简洁手机端登录表单页面代码
代码标签: css div 简洁 手机端 登录 表单 页面 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vant.min.css"> <style> :root { --bbx-color-primary: #FF7100; } .login-content { width:100%; height:100vh; background:url("//repo.bfw.wiki/bfwrepo/images/login/login-bg.png") no-repeat #fff; background-size:100% 252px; overflow:hidden; position:relative } .company-logo { width:68px; height:68px; display:block; margin:40px auto 20px; object-fit:cover; border-radius:50% } .login_title { display:-webkit-box; display:-webkit-flex; display:flex; height:36px; font-family:PingFangSC-Regular,PingFang SC; color:rgba(0,0,0,.45); margin:38px 40px 50px } .login_title p { font-size:20px; font-weight:400; line-height:36px; margin-right:26px } .login_title p.active { font-size:24px; font-family:PingFangSC-Semibold,PingFang SC; font-weight:600; color:#000 } .input-content { position:relative; margin:0 40px 16px } .input-content .van-cell { padding:10px 0 } .iconfont { font-size:12px; color:#999 } .tel-input { -webkit-box-flex:1; -webkit-flex:1; flex:1; text-indent:10px; border:none } .confirm-text { font-size:11px; color:var(--bbx-color-primary); word-break:keep-all } .submit-content { height:44px; margin:30px 40px; border-radius:8px; text-align:center; line-height:44px } .submit-btn { font-size:18px; color:#fff } .submit-btn-no { opacity:.25 } .image-code-span { width:80px; height:30px; display:inline-block } .image-code { width:60px; height:30px; margin-left:20px } .privacy { display:-webkit-box; display:-webkit-flex; display:flex; margin:0 40px; font-size:12px } .privacy p:first-child { margin:2px 8px 0 0 } .privacy span { color:#00d1b2 } .wrapper { display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-align:center; -webkit-align-items:center; align-items:center; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; height:100% } .wrapper .wrapper_bg { background:#fff; padding:20px; border-radius:12px; position:relative; z-index:10 } .wrapper .wrapper_bg p { font-size:16px; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:#262626; line-height:22px; margin-bottom:20px; text-align:center; position:relative } .wrapper .wrapper_bg p .iconfont { position:absolute; right:0; top:0; font-size:20px } .send_code_span { color:#13c2c2 } .language_div { width:100%; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-box-pack:center; -webkit-justify-content:center; justify-content:center; position:absolute; line-height:24px } .language_div p { margin:0 2px; line-height:24px } .language_div .iconfont { font-size:16px } .bg-main {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0