WEB前端登陆页面（复习）
1.登陆界面显示
2.代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><!-- 设置网页的字符编码和响应式布局 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录界面</title><!-- 页面样式设置 --><style>/* 重置所有元素的默认样式，让所有浏览器都从同一起点开始 */* {margin: 0;padding: 0;box-sizing: border-box; /* 让元素的宽度和高度包含内边距和边框 */font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置默认字体 */}body {/* 使用flex布局让登录框在页面中间显示 */display: flex;justify-content: center;align-items: center;min-height: 100vh; /* 至少占满整个屏幕高度 */background-color: #f0f2f5; /* 浅灰色背景 */}/* 登录框的样式 */.login-container {background-color: white; /* 白色背景 */padding: 2.5rem; /* 内边距，让内容不紧贴边框 */border-radius: 10px; /* 圆角边框，看起来更柔和 */box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加立体感 */width: 100%;max-width: 400px; /* 最大宽度限制，防止在大屏幕上太宽 */}/* 登录标题样式 */.login-title {text-align: center; /* 文字居中 */margin-bottom: 1.5rem; /* 底部边距 */color: #1a73e8; /* 蓝色文字，看起来专业可信 */font-size: 2rem; /* 字体大小 */}/* 输入框组的样式（标签+输入框） */.input-group {margin-bottom: 1.2rem; /* 底部边距 */}.input-group label {display: block; /* 让标签单独占一行 */margin-bottom: 0.5rem; /* 底部边距 */color: #5f6368; /* 深灰色文字 */font-weight: 500; /* 字体粗细 */}.input-group input {width: 100%; /* 宽度占满父元素 */padding: 0.8rem; /* 内边距 */border: 1px solid #dadce0; /* 浅灰色边框 */border-radius: 5px; /* 圆角 */font-size: 1rem; /* 字体大小 */transition: border-color 0.3s; /* 边框颜色变化时的动画效果 */}/* 输入框获得焦点时的样式 */.input-group input:focus {outline: none; /* 移除默认的聚焦边框 */border-color: #1a73e8; /* 聚焦时边框变成蓝色 */box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2); /* 轻微的蓝色阴影 */}/* 忘记密码链接样式 */.forgot-password {text-align: right; /* 文字右对齐 */margin-bottom: 1.5rem; /* 底部边距 */}.forgot-password a {color: #1a73e8; /* 蓝色文字 */text-decoration: none; /* 去掉下划线 */font-size: 0.9rem; /* 稍微小一点的字体 */}.forgot-password a:hover {text-decoration: underline; /* 鼠标悬停时显示下划线 */}/* 登录按钮样式 */.login-btn {width: 100%; /* 宽度占满父元素 */padding: 0.8rem; /* 内边距 */background-color: #1a73e8; /* 蓝色背景 */color: white; /* 白色文字 */border: none; /* 无边框 */border-radius: 5px; /* 圆角 */font-size: 1rem; /* 字体大小 */font-weight: 500; /* 字体粗细 */cursor: pointer; /* 鼠标指针变成手型 */transition: background-color 0.3s; /* 背景色变化时的动画效果 */}.login-btn:hover {background-color: #1557b0; /* 鼠标悬停时颜色加深 */}/* 注册链接样式 */.register-link {text-align: center; /* 文字居中 */margin-top: 1.5rem; /* 顶部边距 */color: #5f6368; /* 深灰色文字 */}.register-link a {color: #1a73e8; /* 蓝色文字 */text-decoration: none; /* 去掉下划线 */font-weight: 500; /* 字体粗细 */}.register-link a:hover {text-decoration: underline; /* 鼠标悬停时显示下划线 */}/* 错误消息样式 */.error-message {color: #d93025; /* 红色文字 */text-align: center; /* 文字居中 */margin-bottom: 1rem; /* 底部边距 */display: none; /* 默认隐藏 */}</style>
</head>
<body><!-- 登录框容器 --><div class="login-container"><!-- 登录标题 --><h1 class="login-title">登录</h1><!-- 错误消息提示，登录失败时显示 --><div class="error-message" id="errorMsg">用户名或密码错误</div><!-- 登录表单 --><form id="loginForm"><!-- 用户名输入框 --><div class="input-group"><label for="username">用户名</label><input type="text" id="username" required placeholder="请输入用户名"></div><!-- 密码输入框 --><div class="input-group"><label for="password">密码</label><input type="password" id="password" required placeholder="请输入密码"></div><!-- 忘记密码链接 --><div class="forgot-password"><a href="#">忘记密码？</a></div><!-- 登录按钮 --><button type="submit" class="login-btn">登录</button><!-- 注册链接 --><div class="register-link">还没有账号？<a href="#">立即注册</a></div></form></div><script>// 页面加载完成后执行下面的代码document.addEventListener('DOMContentLoaded', function() {// 获取登录表单元素const loginForm = document.getElementById('loginForm');// 当表单提交时执行这个函数loginForm.addEventListener('submit', function(e) {e.preventDefault(); // 阻止表单默认提交行为，这样我们可以自己处理登录逻辑// 获取用户输入的用户名和密码const username = document.getElementById('username').value;const password = document.getElementById('password').value;// 获取错误消息元素const errorMsg = document.getElementById('errorMsg');// 简单的验证（实际项目中应该发送到服务器验证）if (username === 'admin' && password === '123456') {// 如果用户名和密码正确，显示登录成功提示alert('登录成功！');// 实际项目中这里可以添加跳转代码，比如：window.location.href = 'home.html';} else {// 如果用户名或密码错误，显示错误消息errorMsg.style.display = 'block';// 3秒后自动隐藏错误消息setTimeout(() => {errorMsg.style.display = 'none';}, 3000);}});});</script>
</body>
</html>