css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: #6a6a6a;
text-decoration: none;
}
body {
background-color: #96c6e2;
}
.box {
display: flex;
width: 990px;
height: 550px;
margin: 100px auto;
}
.box .img_left {
width: 315px;
height: 550px;
background: url("D:\\steam\\steamapps\\workshop\\content\\431960\\2\\preview.jpg") -152px 0 / cover;
opacity: 0.85;
}
.box .login {
width: 585px;
height: 550px;
background-color: #d3e6f2;
text-align: center;
}
.box .login h1 {
line-height: 5;
color: #7092c8;
}
.box .login form {
display: flex;
width: 500px;
flex-wrap: wrap;
margin: 0 auto;
}
.box .login .user,
.box .login .pwd {
width: 500px;
border: 0;
border-bottom: 1px solid #8ba9d3;
font-size: 16px;
outline: none;
background-color: #d3e6f2;
padding: 8px;
margin-bottom: 60px;
}
.box .login .button {
width: 350px;
height: 50px;
border: 0;
font-size: 14px;
color: #fff;
border-radius: 7px;
background-image: linear-gradient(120deg, #83c0e1 0%, #d6dce9 100%);
margin: 0 auto;
transition: all 0.3s;
}
.box .login .button:hover {
box-shadow: 0 0 2rem 0.5rem rgba(0, 0, 0, 0.25);
}
.box .login .link {
display: flex;
width: 400px;
height: 50px;
justify-content: space-between;
line-height: 50px;
margin: 50px auto;
}
html
<div class="box">
<div class="img_left"></div>
<div class="login">
<h1>登录</h1>
<form>
<input type="text" placeholder="用户名" class="user" />
<input type="password" placeholder="密码" class="pwd" />
<input type="button" value="Login" class="button" />
</form>
<div class="link">
<a href="javascript:;">注册账号</a>
<a href="javascript:;">找回密码</a>
</div>
</div>
</div>