jquery实现账号密码短信验证码二维码扫码三种登录表单页面
代码语言:html
所属分类:表单美化
代码描述:jquery实现账号密码短信验证码二维码扫码三种登录表单页面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> * { margin: 0px; padding: 0px; text-decoration: none; list-style: none; outline: none; box-sizing: border-box; } .body { background: url(//repo.bfw.wiki/bfwrepo/image/61923f261c983.png) no-repeat; width: 100vw; height: 100vh; overflow: hidden; background-size: 100% 100%; position: absolute; } .logo { height: 45px; margin: 20px 40px; font-size: 30px; color: white; } .img_l { position: fixed; width: 40%; top: 25%; left: 15%; } .body_count { width: 340px; position: fixed; top: 20%; left: 65%; } .body_count_top { width: 100%; text-align: center; color: white; font-size: 22px; font-weight: bold; letter-spacing: 8px; } .login_count { width: 340px; height: 380px; padding: 10px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 15px #2aa2a3; margin-top: 20px; } .login_count_a { width: 100%; } .login_count_a_l { width: 100%; display: inline-flex; align-items: center; justify-content: flex-end; } .icon_e { height: 18px; } .login_a_l_t { color: white; font-size: 12px; padding: 3px; background: linear-gradient(to right, #40E4E5, #cf27f9); } .triangle { float: left; width: 0; height: 0; border-width: 11px; border-style: solid; border-color: transparent #3EE1E2 transparent transparent; transform: rotate(180deg); } #all { width: 80%; margin: 50px auto 0px; } #option { width: 100%; height: 40px; line-height: 40px; border-radius: 20px; border: 1px solid #ceffff; margin-bottom: 40px; } #option li { float: left; text-align: center; width: 50%; /*background: white;*/ height: 38px; cursor: pointer; color: #4f4f4f; font-size: 16px; border-radius: 20px; font-weight: bold; } #option li.active { background: linear-gradient(to left, #40E4E5, #cf27f9); color: white; border-radius: 20px; } #card li { height: 100%; display: none; } #card li.active { display: block; } .login_bot_count { width: 100%; border: 1px solid #34D8DE; display: inline-flex; align-items: center; justify-content: space-between; height: 40px; padding: 3px; margin-top: 10px; } .login_bot_count>img { height: 20px; padding-left: 5px; } .login_bot_count>input { height: 35px; border: 0px; width: 80%; } .login_bot_count>input::-webkit-input-placeholder { color: #dedede; } .login_bot { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; } .login_bot>a, .login_bot>p { font-size: 12px; color: #898989; } .login_bot>p { width: 26%; display: inline-flex; align-items: center; justify-content: space-between; } /*记住密码勾选框*/ .login_bot>p>input[type="checkbox"] { width: 10px; height: 10px; display: inline-block; text-align: center; vertical-align: middle; line-height: 10px; position: relative; } .login_bot>p>input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #fff; width: 100%; height: 100%; border: 1px solid #dedede; } .login_bot>p>input[type="checkbox"]:checked::before { content: "\2713"; background-color: white; position: absolute; top: 0; left: 0; width: 100%; border: 1px solid #dedede; color: #898989; font-size: 12px; font-weight: bold; } /*按钮样式*/ .login_button { margin-top: 20px; width: 100%; border: 0px; height: 35px; font-size: 16px; color: white; background: linear-gradient(to left, #40E4E5, #cf27f9); } .login_account_count { width: 100%; border: 1px solid #34D8DE; display: inline-flex; align-items: center; justify-content: space-between; height: 40px; padding: 3px; margin-top: 10px; } .login_account_count>img { height: 20px; padding-left: 5px; } .mobile_input { height: 35px; border: 0px; width: 75%; } .account_select { color: #4F4F4F; font-size: 14px; border: 0px; margin: 0px 5px; appearance: none; -moz-appearance: none; -webkit-appearance: none; width: 45px; z-index: 999; background: none; } .account_select_icon { position: relative; left: -8%; height: 10px!important; } .login_account_counts { width: 100%; border: 1px solid #34D8DE; display: inline-flex; align-items: center; justify-content: space-between; height: 40px; padding: 3px; margin-top: 10px; } .login_account_counts>img { height: 20px; padding-left: 5px; } .login_account_counts>input:nth-of-type(1){ height: 35px; border: 0px; width: 50%; } .account_code { color: white; background-color: #cf27f9; padding: 5px; font-size: 12px; cursor: pointer; border: 0px; } .login_account_count>input::-webkit-input-placeholder { color: #dedede; } .login_account_counts>input::-webkit-input-placeholder { color: #dedede; } /*按钮样式*/ .login_account_button { margin-top: 40px; width: 100%; border: 0px; height: 35px; font-size: 16px; color: white; background: linear-gradient(to left, #40E4E5, #cf27f9); } .login_count_b { width: 100%; display: none; } .login_count_b_l { width: 100%; display: inline-flex; align-items: center; justify-content: flex-end; } .icon_e, .icon_z { height: 18px; } .login_b_l_t { color: white; font-size: 12px; padding: 3px; background: linear-gradient(to right, #40E4E5, #cf27f92); } .login_b_title>img { height: 22px; margin-right: 5px; } .login_b_title { width: 100%; margin-top.........完整代码请登录后点击上方下载按钮下载查看
网友评论0