大家好，今天给大家介绍一款，简单的教育网站通用登录页面html前端源码（图1）。送给大家哦，获取方式在本文末尾。

图1

加入了输入验证（图2）

图2

响应式设计，适合各种分辨率（图3）

图3

代码完整，需要的朋友可以下载学习（图4）

图4

<!DOCTYPE HTML>
<html lang="zxx">

<head>
	<title>Home</title>
	<!-- Meta-Tags -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- //Meta-Tags -->
	<!-- Stylesheets -->
	<link href="css/style.css" rel='stylesheet' type='text/css' />
	<!--// Stylesheets -->
	<!--online fonts-->
	<link href="http://fonts.googleapis/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
	<!--//online fonts-->
</head>

<body>
	<h1>学生登录页</h1>
	<div class="w3ls-login box">
		<img src="images/logo.png" alt="logo_img" />
		<!-- form starts here -->
		<form action="#" method="post">
			<div class="agile-field-txt">
				<input type="email" name="email" placeholder="输入电子邮箱" required="" />
			</div>
			<div class="agile-field-txt">
				<input type="password" name="password" placeholder="输入密码" required="" id="myInput" />
				<div class="agile_label">
					<input id="check3" name="check3" type="checkbox" value="show password">
					<label class="check" for="check3">记住我</label>
				</div>
			</div>
			<div class="w3ls-bot">
				<input type="submit" value="登录">
			</div>
		</form>
	</div>
	<!-- //form ends here -->
	<!--copyright-->
	<div class="copy-wthree">
		<p>Copyright &copy; 2022.Company name All rights reserved.</p>
	</div>
	<!--//copyright-->
</body>

</html>