html+css朴实无华的登录页面
1楼源码链接
刚接触前端，有问题欢迎指出，不断修改才会进步。
Code-----------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>主页</title>
<style type="text/css">
body{
background-image: linear-gradient(to left,pink,rgb(29, 142, 235));
}
.A{
width: 100%;
height: 97vh;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 400px;
height: 600px;
background-image: linear-gradient(to left,rgb(255, 192, 236),rgba(0, 204, 255, 0.349));
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.267);
}
.t1{
font-size: 30px;
}
.t2{
font-size: 13px;
margin-bottom: 30px;
}
p{
color: pink;
}
input.user,input.pass{
width: 360px;
height: 37px;
border: none;
outline: none;
margin-top: 35px;
border-radius: 20px;
}
.text{
display: flex;
flex-direction: column;
align-items: center;
}
.forget{
text-decoration: none;
color: rgba(0, 0, 0, 0.349);
font-size: 13px;
float: right;
margin-left: 300px;
margin-top: 5px;
}
.forget:hover{
color: rgb(168, 47, 142);
transition-duration: 2s;
}
#t3{
color: rgba(0, 0, 0, 0.315);
font-size: 10px;
margin-top: 120px;
}
#st{
text-decoration: none;
margin-top: 100px;
border: 1px rgba(255, 192, 203, 0.363) solid;
width: 90px;
height: 30px;
background-image: linear-gradient(to left,rgba(255, 0, 221, 0.199),rgba(0, 255, 242, 0.425));
text-align: center;
border-radius: 15px;
line-height: 30px;
color: rgba(0, 0, 0, 0.651);
}
#st:hover{
background-color: pink;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="A">
<div class="box">
<div class="text">
<p class="t1">BILIBILI</p>
<p class="t2">欢迎回来</p>
<input type="text" placeholder="手机号/用户名" autocomplete="on" class="user">
<input type="password" placeholder="密码" class="pass">
<a href="https://www.bilibili.com/"; class="forget">忘记密码?</a>
<input type="submit" id="st">
<p id="t3">上海宽娱数码科技有限公司</p>
</div>
</div>
</div>
</body>
</html>
