最终效果图：
html文件：
<!--
* @Qusetion:
* @Author: 一届书生
* @Date: 2020-04-07 08:17:36
* @LastEditTime: 2020-04-07 10:51:21
-->
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css" />
<title>login</title>
</head>
<body>
<div class="login-container">
<div class="left-container">
<div class="title"><span>登录页面</span></div>
<div class="input-container">
<input type="text" name="username" placeholder="用户名" />
<input type="password" name="password" placeholder="密码" />
</div>
<div class="button-container">
<button>忘记密码</button>
<!-- </div> -->
<!-- <div class="button2-container"> -->
<button>Login</button>
</div>
</div>
<div class="right-container">
<div class="regist-container">
<span class="regist">注册</span>
</div>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
}
body {
/* background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
*/
/* background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); */
background-image: linear-gradient(
to left top,
#a7cef6 0%,
rgb(51 105 232) 100%
);
}
body .login-container {
width: 450px;
height: 300px;
outline: 0;
margin: 13% 35%;
/* margin-top: 13%; */
/* background-color: #fff; */
border-radius: 10px;
box-shadow: 0 1px 35px 0 #264f73;
}
body .login-container .left-container {
width: 68%;
height: 100%;
display: inline-block;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
background-image: linear-gradient(
to left top,
#a7cef6 0%,
rgb(51 105 232) 100%
);
}
body .login-container .left-container .title {
color: white;
font-size: 18px;
font-weight: 700;
margin: 7% 8%;
}
body .login-container .left-container .title span {
border-bottom: 3px solid #fff;
}
body .login-container .left-container .input-container {
margin: 20% 5%;
/* padding: 10px 20px; */
}
body .login-container .left-container .input-container input {
width: 95%;
margin-top: 10px;
border: 0;
transition: 0.2s;
background: none;
outline: 0;
display: block;
color: #fff;
font-size: 15px;
border: 2px solid #dfe6ec;
border-width: 2px;
border-radius: 3px;
line-height: 30px;
padding: 0 0 0 10px;
}
body .login-container .left-container .input-container input:hover {
border: 2px solid #fff;
}
::-webkit-input-placeholder {
color: aliceblue;
}
body .login-container .left-container .button-container button {
background: none;
border: 0;
outline: 0;
background-color: #fff;
border-radius: 3px;
font-size: 15px;
font-weight: 600;
color: #3b6f9c;
width: 80px;
height: 30px;
margin-left: 50px;
transition: 0.2s;
display: inline;
}
body .login-container .left-container .button-container button:hover {
background-color: rgb(81, 139, 245);
color: #fff;
}
body .login-container .right-container {
display: inline-block;
background-color: none;
height: calc(100%-120px);
width: 130px;
vertical-align: top;
padding: 60px 0;
}
body .login-container .right-container .regist-container {
text-align: center;
color: #fff;
font-size: 16px;
font-weight: 500;
}
body .login-container .right-container .regist-container span {
border-bottom: 2px solid #fff;
}
