html+css+js（登录页）
直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
font-family: "microsoft yahei";
}
html,body{
background-image: url(img/jld.png);
background-size: 100% 100%;
height: 100%;
}
.login{
background-color: #FFFFFF;
top: 25%;
position: absolute;
left: 70%;
right: 5%;
bottom: 25%;
border-radius: 15px;
}
.container{
position: relative;
}
.tips,.title,.p,.l,.u{
position: absolute;
/* border: 1px solid red; */
width: 100%;
}
input{
height: 35px;
background-color: #f2f2fa;
border: 0px;
border-radius: 5px;
width: 80%;
}
button{
height: 35px;
background-color: #467fe6;
border: 0px;
border-radius: 5px;
width: 80%;
color: #FFFFFF;
font-size: 16px;
}
.title{
top: 0%;
bottom: 80%;
text-align: center;
font-size: 25px;
font-weight: bold;
padding-top: 10px;
box-sizing: border-box;
}
.u{
top: 20%;
bottom: 60%;
left: 10%;
}
.p{
top: 40%;
bottom: 40%;
left: 10%;
}
.l{
top: 60%;
bottom: 20%;
left: 10%;
}
.tips{
top: 80%;
bottom: 0%;
font-size: 14px;
color: #b9b9b9;
text-align: center;
}
</style>
</head>
<body>
<div class="login">
<div class="title">
废物自学系统
</div>
<div class="u">
<input type="text"/>
</div>
<div class="p">
<input type="password" />
</div>
<div class="l">
<button>登陆</button>
</div>
<div class="tips">
推荐使用YouTube访问
</div>
</div>
</body>
</html>
效果展示如图
