前言 久伴在逛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中色号保留了
我也喜欢，哈哈，神秘感