前辈们请跳过

在校大学生 学习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" ><span id="checkbox1" class="checkboxmessage" style="font-size: 12px;">记住密码</span>
				</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<label>
					<input type="checkbox" ><span id="checkbox2" class="checkboxmessage" style="font-size: 12px;">自动登录</span>
			</div>
		</form>
	</body>
</html>

注册页面代码：


<!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 test(){
				var test1 = $("test1").value;
				var test2 = $("test2").value;
				var test3 = $("test3").value;
				var test4 = $("test4").value;

				if(test1.length == 0){
					$("span1").innerHTML = "用户名不能为空";
					$("test1").focus();
					return false;
				}else{
					$("span1").innerHTML = "✔";
				}
				if(test1.length > 0 && test1.length < 4){
					$("span1").innerHTML = "用户名长度至少4个字符";
					$("test1").focus();
					return false;
				}else{
					$("span1").innerHTML = "✔";
				}
				if(test1.length > 16){
					$("span1").innerHTML = "用户名不能超过16个字符";
					$("test1").focus()
					return false;
				}else{
					$("span1").innerHTML = "✔";
				}
				if(test2.length == 0){
					$("span2").innerHTML = "密码不能为空";
					$("test2").focus();
					return false;
				}else{
					$("span2").innerHTML = "✔";
				}
				if(test2.length > 0 && test2.length < 4){
					$("span2").innerHTML = "密码长度至少为4个字符";
					$("test2").focus();
					return false;
				}else{
					$("span2").innerHTML = "✔";
				}
				if(test2.length > 16){
					$("span2").innerHTML = "密码长度不能超过16个字符";
					$("test2").focus();
					return false;
				}
				if(test2 != test3){
					$("span3").innerHTML = "两次输入密码不一致";
					$("test3").focus();
					return false;
				}else{
					$("span3").innerHTML = "✔";
				}
				if(test4.length == 0){
					$("span4").innerHTML = "邮箱不能为空！";
					$("test4").focus();
					return false;
				}else{
					$("span4").innerHTML = "✔";
				}
				alert("注册成功！");
			}
				
		</script>
	</head>
	<body>
		<form id="form" name="form" class="box" onsubmit="return test()" action="登录页面.html" method="post">
			
			<h1>注册页面</h1>
			<input id="test1" type="text" name="" placeholder="用户名" >
			<span id="span1" type="t1" class="tips">*用户名为4-16长度字符</span>
			<input id="test2" type="password" name="" placeholder="密码">
			<span id="span2" type="t2" class="tips">*密码为4-16字符</span>
			<input id="test3" type="password" name="" placeholder="确认密码">
			<span id="span3" type="t2" class="tips">*应与密码一致</span>
			<input id="test4" type="email" name="" placeholder="电子邮箱">
			<span id="span4" type="t3" class="tips">*邮箱不能为空</span>
			<input type="idcard" name="" placeholder="身份证">
			<span type="t4" class="tips"></span>
			<input type="phone" name="" placeholder="手机号">
			<input type="submit" name="" value="注册">
			<p class="meassage">已经注册完了？<a href="登录页面.html">登录</a>
			</p>

		</form>
		</body>
	</html>

css代码:

body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #34495e;
}
.box{
  width: 300px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #191919;
  text-align: center;
}
.box h1{
  color: white;
  text-transform: uppercase;
  font-weight: 500;
}
.box input[type = "text"],.box input[type = "password"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus{
  width: 280px;
  border-color: #2ecc71;
}
.box input[type = "text"],.box input[type = "email"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}
.box input[type = "text"]:focus,.box input[type = "email"]:focus{
  width: 280px;
  border-color: #2ecc71;
}
.box input[type = "submit"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #2ecc71;
  padding: 14px 40px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
  cursor: pointer;
}
.box input[type = "submit"]:hover{
  background: #2ecc71;
}
	
.box .meassage{
	text-transform: uppercase;
	color:white;
}
.box input[type = "text"]:focus,.box input[type = "idcard"]:focus{
  width: 280px;
  border-color: #2ecc71;
}
.box input[type = "text"],.box input[type = "idcard"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}.box input[type = "text"]:focus,.box input[type = "phone"]:focus{
  width: 280px;
  border-color: #2ecc71;
}
.box input[type = "text"],.box input[type = "phone"]{
  border:0;
  background: none;
  display: block;
  margin: 20px auto;
  text-align: center;
  border: 2px solid #3498db;
  padding: 14px 10px;
  width: 200px;
  outline: none;
  color: white;
  border-radius: 24px;
  transition: 0.25s;
}
.checkboxmessage{
	color:white;
	font-size:18px;
}
.tips{
	color:white;
	font-size:12px;
}

更多推荐

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