前言 久伴在逛DDOS网站看到一款暗黑系列的登录界面感觉还不错,有种神秘的赶脚,但发现国外大佬写的这个登录框代码很老了~还是html低版本语法 久伴就照造着对方界面写了一个采用H5+flex布局
效果图
注意
该代码引用了Font Awesome 字体图标库
效果演示
[link href=http://demo.jiubx.com/2020.8.6/j_login/login.html]在线演示[/link]
前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>暗黑登录</title> <link rel="stylesheet" href="font/css/font-awesome.css"> <style> * { margin: 0; padding: 0; } body, html { background-color: #1c1f22; color: #9a9da0; } a { color: #fff; text-decoration: none; } .warp { width: 100%; height: auto; } .container { max-width: 600px; } .j_head_img { text-align: center; } .j_head_img img { max-width: 100%; height: 200px; vertical-align: middle; } .j_margin { margin: 6% auto 0; } .j_form { background-color: #2c3136; border: 1px solid #2c3136; } .j_form_head { padding: 10px 10px; color: #fff; background-color: #3b3e47; border: 1px solid #3b3e47; } .j_form_title { font-size: 16px; line-height: 26px; } .j_form_title h3 i { padding: 0 9px 0 0; } .j_form_body { padding: 15px 15px; } .j_form_warp { margin-top: 16px; display: flex; flex-direction: row; } .j_form_warp .j_form_span { padding: 6px 12px; border: 1px solid #393e45; background-color: #393e45; color: #fff; } .j_form_warp .j_form_span i { width: 10px; height: 10px; } .j_form_warp .j_form_input { border: 1px solid #1c1f22; background-color: #1c1f22; letter-spacing: 1px; width: 100%; padding: 6px 12px; outline: none } .j_form_warp .j_form_input:focus { color: #fff; } .j_footer input[type="checkbox"]{ content: ""; display: block; width: 15px; height: 15px; border-radius: 2px; text-align: center; line-height: 15px; border: 1px solid #ccc; } .j_footer label { margin: -4px 0 0 10px; } .j_footer_button { width: 100%; height: auto; text-align: center; color: #fff; margin-top: 16px; } .j_footer_button button{ background-color: #5b69bc; border: 1px solid #4c59a7; color: #fff; padding: 0 8px 0 0; } .j_footer_button span { display: inline-block; padding: 8px 12px; margin-right: 8px; background: rgba(0,0,0,.15); } hr { border: 0; border-top: 1px solid #3d404c; margin: 20px 0; } .j_footer_login { width: 100%; height: auto; text-align: center; } </style> </head> <body> <section class="warp"> <div class="container j_margin"> <header> <div class="j_head_img"> <img src="https://client.undisclosed.to/panel/assets/logo-login.png" alt=""> </div> </header> <article class="j_form"> <div class="j_form_head"> <div class="j_form_title"> <h3><i class="fa fa-sign-in j_form_padding"></i>Register</h3> </div> </div> <div class="j_form_body"> <form action="" method="POST"> <div class="j_form_warp"> <span class="j_form_span"><i class="fa fa-user"></i></span> <input class="j_form_input" type="text" placeholder="Username"> </div> <div class="j_form_warp"> <span class="j_form_span"><i class="fa fa-key fa-fw"></i></span> <input class="j_form_input" type="text" placeholder="Password"> </div> <div class="j_form_warp"> <span class="j_form_span"><i class="fa fa-key fa-fw"></i></span> <input class="j_form_input" type="text" placeholder="Repeat Password"> </div> <div class="j_form_warp"> <span class="j_form_span"><i class="fa fa-envelope-o fa-fw"></i></span> <input class="j_form_input" type="text" placeholder="Email"> </div> <div class="j_footer j_form_warp"> <input type="checkbox"> <label for="">I read and accept the <a href="">TOS</a></label> </div> <div class="j_footer_button"> <button> <span><i class="fa fa-sign-out"></i></span> Sign Up </button> </div> <hr/> <div class="j_footer_login"> <span>Do you have an account? <a href="">Sign In</a></span> </div> </form> </div> </article> </div> </section> </body> </html>
版权声明
该文章为久伴原创,转载请注明出处,Thank you!
加群入久伴博客官方微信群
加入久伴官方微信群有啥优势?
1.文章内部资源由于时间久远可能失效,加群,群内可以第一时间反馈
2.网站中教程不一定适用任何人,加群可以第一时间咨询并解决您得疑惑
3.你游荡于互联网,也需要群体,加群一起互动交流,畅所欲言
扫描下方二维码即可加入交流讨论

喜欢暗黑系,将CSS中色号保留了
我也喜欢,哈哈,神秘感