- 现代化设计：使用卡片式布局，带有柔和的阴影和圆角。
- 响应式布局：在电脑和手机上都能完美显示。
- 表单验证：确保用户输入了用户名和密码。
- 加载动画：点击登录按钮后，会显示一个加载状态，提升用户体验。
- 友好的错误提示：如果登录失败，会显示一个非侵入式的错误消息。
- 纯HTML/CSS/JS实现：不依赖任何外部框架（如Bootstrap），方便您学习和修改。
最终效果预览
电脑端:
手机端:
第一步：HTML 结构 (骨架)
这是登录界面的基本结构,包含了标题、输入框、登录按钮和错误提示区域。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">登录页面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<form class="login-form" id="loginForm">
<h2>欢迎登录</h2>
<!-- 错误提示区域 -->
<div id="errorMessage" class="error-message" style="display: none;"></div>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入您的用户名" required>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入您的密码" required>
</div>
<div class="form-options">
<label class="remember-me">
<input type="checkbox" name="remember">
<span>记住我</span>
</label>
<a href="#" class="forgot-password">忘记密码?</a>
</div>
<button type="submit" class="login-btn" id="loginBtn">
<span id="btnText">登录</span>
<span id="btnLoader" class="loader" style="display: none;"></span>
</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
第二步：CSS 样式 (美化)
这部分代码负责界面的所有样式,使其看起来现代、专业。
/* style.css */
/* 全局样式和变量 */
:root {
--primary-color: #4a90e2;
--primary-hover-color: #357abd;
--error-color: #e74c3c;
--text-color: #333;
--light-gray: #f4f7f6;
--border-color: #ddd;
--shadow-color: rgba(0, 0, 0, 0.1);
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--light-gray);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* 登录容器 */
.login-container {
background-color: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px var(--shadow-color);
width: 100%;
max-width: 400px;
}
/* 表单样式 */
.login-form h2 {
text-align: center;
margin-bottom: 30px;
color: var(--primary-color);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px;
border: 1px solid var(--border-color);
border-radius: 5px;
box-sizing: border-box; /* 确保 padding 不会影响宽度 */
font-size: 16px;
transition: border-color 0.3s;
}
.form-group input:focus {
outline: none;
border-color: var(--primary-color);
}
/* 表单选项 */
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
font-size: 14px;
}
.remember-me {
display: flex;
align-items: center;
cursor: pointer;
}
.remember-me input {
margin-right: 5px;
}
.forgot-password {
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s;
}
.forgot-password:hover {
color: var(--primary-hover-color);
text-decoration: underline;
}
/* 登录按钮 */
.login-btn {
width: 100%;
padding: 12px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
position: relative; /* 用于定位加载动画 */
transition: background-color 0.3s;
}
.login-btn:hover {
background-color: var(--primary-hover-color);
}
/* 加载动画 */
.loader {
border: 3px solid #f3f3f3;
border-top: 3px solid white;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* 错误消息 */
.error-message {
background-color: #fde8e8;
color: var(--error-color);
padding: 10px;
border-radius: 5px;
margin-bottom: 20px;
text-align: center;
font-size: 14px;
border-left: 4px solid var(--error-color);
}
/* 响应式设计 */
@media (max-width: 480px) {
.login-container {
padding: 25px;
margin: 20px;
}
}
第三步：JavaScript 功能 (交互)
这部分代码处理表单提交、验证、加载状态和错误提示。
// script.js
document.addEventListener('DOMContentLoaded', () => {
const loginForm = document.getElementById('loginForm');
const loginBtn = document.getElementById('loginBtn');
const btnText = document.getElementById('btnText');
const btnLoader = document.getElementById('btnLoader');
const errorMessage = document.getElementById('errorMessage');
// 模拟的用户名和密码
// 在实际应用中，这应该通过后端API进行验证
const validCredentials = {
username: 'admin',
password: '123456'
};
loginForm.addEventListener('submit', async (event) => {
// 1. 阻止表单默认的提交行为（页面刷新）
event.preventDefault();
// 2. 获取表单数据
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 3. 简单的前端验证
if (!username || !password) {
showError('请输入用户名和密码！');
return;
}
// 4. 显示加载状态
setLoadingState(true);
// 5. 模拟网络请求延迟
await new Promise(resolve => setTimeout(resolve, 1500));
// 6. 验证用户凭据
if (username === validCredentials.username && password === validCredentials.password) {
// 登录成功
alert('登录成功！欢迎回来！');
// 在实际应用中，这里会重定向到主页
// window.location.href = '/dashboard';
} else {
// 登录失败
showError('用户名或密码错误！');
}
// 7. 恢复按钮状态
setLoadingState(false);
});
function setLoadingState(isLoading) {
if (isLoading) {
btnText.style.display = 'none';
btnLoader.style.display = 'block';
loginBtn.disabled = true; // 禁用按钮，防止重复提交
} else {
btnText.style.display = 'inline';
btnLoader.style.display = 'none';
loginBtn.disabled = false;
}
}
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = 'block';
// 5秒后自动隐藏错误消息
setTimeout(() => {
errorMessage.style.display = 'none';
}, 5000);
}
});
如何使用
- 创建文件：创建三个文件，分别命名为
index.html、style.css和script.js。 - 复制代码：将上面对应的代码分别粘贴到这三个文件中。
- 放置文件：将这三个文件放在同一个文件夹下。
- 打开浏览器：用浏览器打开
index.html文件，即可看到登录界面。
自定义和扩展
- 修改样式：您可以直接在
style.css文件中修改颜色、字体、间距等，来匹配您的品牌风格。 - 修改验证逻辑：在
script.js文件中，您可以替换validCredentials对象，改为连接真实的后端API进行用户验证。 - 添加更多功能：您可以轻松地在HTML中添加“注册”链接，或在CSS中添加“社交账号登录”按钮的样式。
这个登录界面为您提供了一个坚实的基础,您可以根据自己的项目需求进行进一步的定制和开发。
