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>