HTML+CSS+JS编写一个较为美观的简单登录注册网页

本文链接：https://blog.csdn.net/weixin_54018699/article/details/118240485

前辈们请跳过

在校大学生学习web一个月做出来的。
CSS订制两个网页的样式和简单的小动画
Js实现注册登录的正确错误，值得一提的是，我这里设置了用户名为1234，密码为1234才可以登录跳转。没有加后端。注册的格式大家就自行查看。
HTML定义网页基本框架
经检验火狐、Microsoft Edge都可以实现
登录页面：在这里插入图片描述
注册页面：

登录页面代码：

// An highlighted block
<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" href="2.css">
		<script>
			function $(id){
   
				return document.getElementById(id);
			}
			function confirm(){
   
				var username1 = $("username1").value;
				var password1 = $("password1").value;
				if(username1.length == 0){
   
					$("username1").focus();
					alert("请输入用户名!");
					return false;
				} 
				if(username1 != "1234"){
   
					$("username1").focus();
					alert("用户名或密码错误！");
					return false;
				}
				if(password1.length == 0){
   
					$("password1").focus();
					alert("请输入密码");
					return false;
				}
				if(password1 != "1234"){
   
					$("password1").focus();
					alert("用户名或密码错误！")
					return false;
				}
				alert("登陆成功！");
			}
		</script>
	</head>
	<body>
		<form class="box" action="index.html" onsubmit="return confirm()" method="post">
			<h1>登录</h1>
			<input id="username1" type="text" name="" placeholder="用户名">
			<input id="password1" type="password" name="" placeholder="密码">
			<input type="submit" name="" value="登录">
			<p class="meassage">还未注册？<a href="注册页面.html"> 注册</a>
			</p>
			<div class="checkbox"> 
				<label>
					<input type="checkbox"