个人学习
原创来至于哔哩哔哩：https://www.bilibili.com/video/BV1KA411T75J
可借鉴之处：
1.设计了颜色渐变： background:radial-gradient(circle,#3cadeb,#9c88ff);从中间向两边简便，
background-image: linear-gradient(90deg,#3cadeb,#9c88ff); 线性渐变。
2.box-shadow: 0 5px 15px rgba(0, 0, 0, .8);使得中间页面更有立体感。
效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极简美登录框</title>
<style>
body{
/*设置背景简便*/
background:radial-gradient(circle,#3cadeb,#9c88ff);/*从中间向两边简便*/
/* background-image: linear-gradient(90deg,#3cadeb,#9c88ff); */
display: flex;
justify-content: center;
}
.a{
position: relative;
top: 120px;
width: 800px;
height: 450px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .8);
display: flex;
}
.b{
width: 500px;
height: 450px;
background-image: url('0 (1).jpg');
/* 让图片适应大小*/
background-size: cover;
}
.c{
width: 300px;
height: 450px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.d{
width: 250px;
height: 450px;
}
.d h1{
margin-top: 20px;
text-align: center;
font: 900 30px;
}
.e{
width: 200px;
margin: 12px;
outline: none;
border: 0;
padding: 10px;
border-bottom: 3px solid rgb(80, 80, 170);
font: 900 16px '';
}
.f{
float: right;
margin: 10px 0;
}
.g{
position: absolute;
margin: 20px;
bottom: 30px;
display: block;
width: 200px;
height: 50px;
font: 900 30px;
text-decoration: none;
line-height: 40px;
border-radius: 30px;
background-image: linear-gradient(to left,#9c88ff,#3cadeb);
text-align: center;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
<div class="c">
<div class="d">
<h1>Login/register</h1>
<input type="text" class="e" placeholder="User Name">
<input type="text" class="e" placeholder="Account">
<input type="password" class="e" placeholder="Password">
<a href="#" class="f">Forget the password?</a>
<a href="#" class="g">Login</a>
</div>
</div>
</div>
</body>
</html>