最终效果预览
这是一个在桌面和手机上都能良好显示的登录页面。
（图片来源网络，侵删）
完整代码
您只需要将以下代码复制到一个 .html 文件中，然后用浏览器打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">餐厅登录 - 欢迎光临</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Icons (可选，用于美化输入框图标) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<style>
/* 自定义样式，让页面更美观 */
body {
background-color: #f8f9fa; /* 浅灰色背景 */
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
background-color: #ffffff;
padding: 2.5rem 3rem;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 420px;
}
.login-header {
text-align: center;
margin-bottom: 2rem;
}
.login-header img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 1rem;
}
.login-header h2 {
font-weight: 600;
color: #333;
margin-bottom: 0.5rem;
}
.login-header p {
color: #6c757d;
font-size: 0.9rem;
}
.form-floating {
margin-bottom: 1.5rem;
}
.btn-login {
width: 100%;
padding: 0.75rem;
font-weight: 500;
background-color: #dc3545; /* 餐厅主题红色 */
border: none;
transition: background-color 0.3s ease;
}
.btn-login:hover {
background-color: #bb2d3b; /* 悬停时深一点的红色 */
border: none;
}
.form-check-input:checked {
background-color: #dc3545;
border-color: #dc3545;
}
.divider {
text-align: center;
margin: 1.5rem 0;
position: relative;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #dee2e6;
}
.divider span {
background-color: #fff;
padding: 0 10px;
position: relative;
color: #6c757d;
font-size: 0.85rem;
}
.social-login-buttons {
display: flex;
gap: 1rem;
}
.social-btn {
flex: 1;
padding: 0.5rem;
border: 1px solid #dee2e6;
background-color: #fff;
color: #495057;
border-radius: 8px;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
}
.social-btn:hover {
background-color: #f8f9fa;
border-color: #adb5bd;
color: #212529;
}
</style>
</head>
<body>
<div class="container">
<div class="login-container">
<!-- 登录头部 -->
<div class="login-header">
<!-- 这里可以放餐厅的 Logo -->
<img src="https://via.placeholder.com/80" alt="餐厅Logo">
<h2>欢迎光临</h2>
<p>请登录您的账户</p>
</div>
<!-- 登录表单 -->
<form id="loginForm" novalidate>
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" required>
<label for="floatingInput">邮箱地址</label>
<div class="invalid-feedback">
请输入一个有效的邮箱地址。
</div>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password" required>
<label for="floatingPassword">密码</label>
<div class="invalid-feedback">
密码不能为空。
</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="rememberMe">
<label class="form-check-label" for="rememberMe">
记住我
</label>
</div>
<div class="d-grid gap-2">
<button class="btn btn-primary btn-login" type="submit">登 录</button>
</div>
</form>
<!-- 分隔线 -->
<div class="divider">
<span>或者</span>
</div>
<!-- 第三方登录 -->
<div class="social-login-buttons">
<a href="#" class="social-btn">
<i class="bi bi-wechat"></i> 微信
</a>
<a href="#" class="social-btn">
<i class="bi bi-phone"></i> 手机号
</a>
</div>
<!-- 底部链接 -->
<div class="text-center mt-4">
<a href="#" class="text-decoration-none">忘记密码？</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-decoration-none">立即注册</a>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义 JavaScript 用于表单验证 -->
<script>
// 获取表单和输入框元素
const form = document.getElementById('loginForm');
const emailInput = document.getElementById('floatingInput');
const passwordInput = document.getElementById('floatingPassword');
// 为输入框添加输入事件监听器，当用户开始输入时移除错误样式
emailInput.addEventListener('input', () => {
if (emailInput.classList.contains('is-invalid')) {
emailInput.classList.remove('is-invalid');
}
});
passwordInput.addEventListener('input', () => {
if (passwordInput.classList.contains('is-invalid')) {
passwordInput.classList.remove('is-invalid');
}
});
// 表单提交事件
form.addEventListener('submit', (event) => {
// 阻止表单默认提交行为
event.preventDefault();
event.stopPropagation();
let isValid = true;
// 验证邮箱
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailInput.value)) {
emailInput.classList.add('is-invalid');
isValid = false;
} else {
emailInput.classList.remove('is-invalid');
emailInput.classList.add('is-valid');
}
// 验证密码
if (passwordInput.value === '') {
passwordInput.classList.add('is-invalid');
isValid = false;
} else {
passwordInput.classList.remove('is-invalid');
passwordInput.classList.add('is-valid');
}
// 如果表单有效，则执行登录逻辑（这里只是模拟）
if (isValid) {
// 在实际应用中，这里会发送AJAX请求到后端服务器
alert('登录成功！欢迎回来！');
console.log('登录信息:', {
email: emailInput.value,
password: passwordInput.value,
rememberMe: document.getElementById('rememberMe').checked
});
// 可以在这里添加页面跳转逻辑，window.location.href = 'dashboard.html';
} else {
// 如果表单无效，显示错误信息
form.classList.add('was-validated');
}
});
</script>
</body>
</html>
代码解析
HTML 结构
-
<head>:viewportmeta标签: 确保页面在移动设备上正确缩放，这是响应式设计的关键。- Bootstrap 5 CSS: 通过CDN引入Bootstrap的核心样式文件。
- Bootstrap Icons: 引入图标库，用于美化输入框和社交登录按钮。
<style>: 自定义CSS，用于美化登录框，如阴影、圆角、间距和颜色。
-
<body>:<div class="container">: Bootstrap的容器，用于居中内容并控制最大宽度。<div class="login-container">: 登录框的主体，包含所有登录元素。<div class="login-header">: 登录框的头部，可以放置Logo和欢迎文字。<form>: 表单元素，id="loginForm"用于JavaScript操作，novalidate属性阻止浏览器默认的验证提示，以便我们使用Bootstrap的验证样式。<div class="form-floating">: Bootstrap 5 的新特性，可以创建带有浮动标签的输入框，体验更好。<div class="invalid-feedback">: 当输入验证失败时显示的错误信息。<div class="form-check">: 复选框，用于“记住我”功能。<button class="btn btn-primary">: 登录按钮。
<div class="divider">: 一个自定义的“或”分隔线。<div class="social-login-buttons">: 第三方登录按钮的容器，这里用链接<a>模拟了微信和手机号登录。<div class="text-center mt-4">: 底部的忘记密码和注册链接。
CSS 样式
body: 使用 Flexbox 布局（display: flex,align-items: center,justify-content: center）将整个登录框完美地居中于屏幕。.login-container: 设置了白色背景、圆角、阴影，并限制了最大宽度，使其在大屏幕上看起来不会过宽。.btn-login: 自定义了登录按钮的样式，使用了餐厅主题色（红色#dc3545），并添加了悬停效果。.social-btn: 为第三方登录按钮添加了简洁的边框和悬停效果。
JavaScript 功能
- 表单验证:
- 获取表单和输入框的DOM元素。
- 为
submit事件添加监听器，当用户点击登录按钮时，触发验证逻辑。 - 邮箱验证: 使用正则表达式 (
emailRegex) 检查输入是否符合邮箱格式。 - 密码验证: 检查密码是否为空。
classList.add('is-invalid'): 如果验证失败，给输入框添加Bootstrap的“无效”样式，并显示错误信息。classList.add('is-valid'): 如果验证成功，添加“有效”样式（绿色边框）。event.preventDefault(): 阻止表单的默认提交行为，这样我们就可以用JavaScript来控制流程。
- 用户体验优化:
- 当用户开始在输入框中打字时,会移除错误样式，避免一直显示错误状态。
- 如果所有验证都通过,会弹出一个
alert提示登录成功，并打印登录信息到控制台，在实际项目中，这里会替换为发送AJAX请求到服务器。
如何使用和修改
- 保存文件: 将所有代码复制并粘贴到一个新的文本文件中，将其命名为
login.html或任何你喜欢的名字，但后缀必须是.html。 - 打开文件: 用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个
login.html文件。 - :
- Logo: 将
<img src="https://via.placeholder.com/80" alt="餐厅Logo">中的src属性替换为你自己的餐厅Logo图片路径。 - 标题和文字: 修改
<h2>,<p>,<a>标签内的文字。 - 颜色: 在
<style>块中修改.btn-login的background-color来改变主题色。 - 功能: 如果需要连接后端，你需要将JavaScript中的
alert和console.log替换为fetch或axios等AJAX请求代码，将表单数据发送到你的服务器API。
- Logo: 将
（图片来源网络，侵删）
