超级可爱的登录页面（html+css+js）_访问出错的提示可爱-CSDN博客

本文链接：https://blog.csdn.net/XHL1314mmq/article/details/99708890

ps：前端嫩牛，技术肯定不如大牛，如果有什么不足的地方，请您提出宝贵的意见，感谢！

一、作品介绍

本作品是我独立完成的一个个人网站的登录页面，实现了动态透明输入框、背景图自适应浏览器窗口、模拟登录验证、验证错误提示等功能。

1、主要技术：HTML、CSS、jQuery
2、主页面
在这里插入图片描述
3、验证错误提示
错误类型不一样，提示文字也不一样，这里举例说明未输入用户名和密码的情况

二、代码部分

1、html 代码( login.html )

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<title>登录界面</title>
		<link rel="stylesheet" type="text/css" href="css/login.css" />
	</head>

	<body>
		<p class="wel">Welcome to my personal website.</p>
		<!-- 登录表单 -->
		<form class="login"  method="post">
			<h1>Login</h1>
			<input type="text" name="username" id="username" placeholder="Username"  autocomplete="off" />
			<input type="password" name="password" id="password" placeholder="Password"  />
			<!--验证错误提示-->
			<div id="error"></div>
			<input type="button" name="sub" id="sub" value="Login" />
		</form>
      
        /* js 代码比较少，没必要写成单独的js文件 */
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			/******************
			 * 本地模拟登录验证 *
			 ******************/
			$(".login #sub")[0].onclick = function() {
				var user = $(".login  #username")[0].value; //获取 username 的输入值
				var pass = $(".login  #password")[0].value; 获取 password 的输入值
				if(user == '123' && pass == 123) {
					window.location.href = "https://www.baidu.com/";
				} else if(user == '' || pass == '') {
					$("#error").text("*账号或密码不能为空");
				} else {
					$("#error").text("*账号或密码有误，请重新输入");
				}
			}
			
			//点击 username 和 password 输入框时，清除错误提示
			$(".login #username")[0].onclick = function() {
				$("#error").text('');
			}
			$(".login #password")[0].onclick = function() {
				$("#error").text('');
			}
		</script>
	</body>

</html>

2、css 代码( login.css )

html {
	height: 100%;
}

/* 背景图片样式 */
body {
	margin: 0;
	padding: 0;
	background-image: url(../images/bg.gif);
	background-size: 100% 100%;
	}

/* Welcome to my personal website. 样式 */
.wel {
	color: rgba(255,255,255,.7);
	font-size: 50px;
	text-align: center;
}

/* 登录区域样式 */
.login {
	width: 300px;
	padding: 10px 40px 5px 40px;
	top: 30%;
	left: 10%;
	background: rgba(255,255,255,.2);  /*实现半透明效果 */
	box-shadow: 15px 15px 25px rgba(255,255,255,.5); /* 实现盒子阴影效果 */
	border-radius: 50%;  /* 圆形 */
	text-align: center;
	position: fixed;  /* 固定定位 */
}

/* Login 字体样式 */
.login h1 {
	color: rgba(255,255,255,.7);
	text-transform: uppercase;
	font-weight: 600;
}

/* 登录输入框样式 */
.login #username,
#password {
	border: 0;
	background: none;
	display: block;
	font-size: 18px;
	margin: 20px auto;
	text-align: center;
	border: 2px solid rgba(255,255,255,.5);  /* 边框属性 */
	padding: 14px 10px;
	width: 200px;
	outline: none;
	color: rgba(255,255,255,.5);  /* 字体颜色 */
	border-radius: 24px;
	transform: 0.25s; /* 动画时间 */
}
/* 点击到输入框时，输入框的样式 */
.login #username:focus, #password:focus {
	width: 240px;	
}

/* 错误提示样式 */
.login #error {
	width: 100%;
	height: 20px;
	color: red;
}

/* login登录按钮样式 */
.login #sub {
	background: none;
	display: block;
	font-size: 18px;
	margin: 20px auto;
	text-align: center;
	border: 2px solid rgba(255,255,255,.5);
	padding: 14px 30px;
	outline: none;
	color: rgba(255,255,255,.5);
	border-radius: 24px;
	cursor: pointer;  /* 光标移动到Login按钮时，变成小手形状 */
}

/* 鼠标移入到登录按钮的样式 */
.login #sub:hover {
	background-color: skyblue;
}