我来为你创建一个现代化的网页登录页面，包含完整的HTML、CSS和JavaScript功能。
（图片来源网络，侵删）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">登录页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.login-container {
background: white;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 100%;
max-width: 400px;
transform: translateY(0);
transition: all 0.3s ease;
}
.login-container:hover {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.login-header h1 {
color: #333;
font-size: 28px;
margin-bottom: 10px;
}
.login-header p {
color: #666;
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e1e5e9;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
outline: none;
}
.form-group input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-group input::placeholder {
color: #999;
}
.password-toggle {
position: relative;
}
.password-toggle-btn {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: #666;
font-size: 16px;
}
.password-toggle-btn:hover {
color: #667eea;
}
.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.remember-me {
display: flex;
align-items: center;
}
.remember-me input {
margin-right: 8px;
}
.remember-me label {
color: #666;
font-size: 14px;
margin-bottom: 0;
}
.forgot-password {
color: #667eea;
text-decoration: none;
font-size: 14px;
transition: color 0.3s ease;
}
.forgot-password:hover {
color: #5a6fd8;
}
.login-btn {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
}
.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.login-btn:active {
transform: translateY(0);
}
.divider {
text-align: center;
margin: 20px 0;
position: relative;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e1e5e9;
}
.divider span {
background: white;
padding: 0 15px;
color: #666;
font-size: 14px;
}
.social-login {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.social-btn {
flex: 1;
padding: 10px;
border: 2px solid #e1e5e9;
background: white;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.social-btn:hover {
border-color: #667eea;
background: #f8f9ff;
}
.signup-link {
text-align: center;
color: #666;
font-size: 14px;
}
.signup-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
}
.signup-link a:hover {
color: #5a6fd8;
}
.error-message {
background: #fee;
color: #c33;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
font-size: 14px;
display: none;
}
.success-message {
background: #efe;
color: #363;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
font-size: 14px;
display: none;
}
@media (max-width: 480px) {
.login-container {
padding: 30px 20px;
}
.social-login {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="login-container">
<div class="login-header">
<h1>欢迎回来</h1>
<p>请登录您的账户</p>
</div>
<div class="error-message" id="errorMessage"></div>
<div class="success-message" id="successMessage"></div>
<form id="loginForm">
<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>
<div class="password-toggle">
<input type="password" id="password" name="password" placeholder="请输入密码" required>
<button type="button" class="password-toggle-btn" id="togglePassword">👁️</button>
</div>
</div>
<div class="remember-forgot">
<div class="remember-me">
<input type="checkbox" id="remember" name="remember">
<label for="remember">记住我</label>
</div>
<a href="#" class="forgot-password">忘记密码？</a>
</div>
<button type="submit" class="login-btn">登录</button>
</form>
<div class="divider">
<span>或</span>
</div>
<div class="social-login">
<button type="button" class="social-btn">
<span>📘</span>
<span>微信</span>
</button>
<button type="button" class="social-btn">
<span>🔵</span>
<span>QQ</span>
</button>
<button type="button" class="social-btn">
<span>🟦</span>
<span>钉钉</span>
</button>
</div>
<div class="signup-link">
还没有账户？<a href="#">立即注册</a>
</div>
</div>
<script>
// 密码显示/隐藏切换
document.getElementById('togglePassword').addEventListener('click', function() {
const passwordInput = document.getElementById('password');
const toggleBtn = document.getElementById('togglePassword');
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
toggleBtn.textContent = '🙈';
} else {
passwordInput.type = 'password';
toggleBtn.textContent = '👁️';
}
});
// 表单提交处理
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const remember = document.getElementById('remember').checked;
// 隐藏之前的消息
document.getElementById('errorMessage').style.display = 'none';
document.getElementById('successMessage').style.display = 'none';
// 简单的验证逻辑
if (!username || !password) {
showError('请填写完整的登录信息');
return;
}
if (password.length < 6) {
showError('密码长度不能少于6位');
return;
}
// 模拟登录过程
const loginBtn = document.querySelector('.login-btn');
loginBtn.textContent = '登录中...';
loginBtn.disabled = true;
setTimeout(() => {
// 模拟登录成功
showSuccess('登录成功！正在跳转...');
// 保存登录状态
if (remember) {
localStorage.setItem('rememberedUser', username);
}
// 模拟跳转
setTimeout(() => {
console.log('跳转到主页');
// window.location.href = 'dashboard.html';
}, 1500);
}, 1500);
});
// 显示错误消息
function showError(message) {
const errorDiv = document.getElementById('errorMessage');
errorDiv.textContent = message;
errorDiv.style.display = 'block';
}
// 显示成功消息
function showSuccess(message) {
const successDiv = document.getElementById('successMessage');
successDiv.textContent = message;
successDiv.style.display = 'block';
}
// 社交登录按钮点击事件
document.querySelectorAll('.social-btn').forEach(btn => {
btn.addEventListener('click', function() {
const platform = this.textContent.trim();
console.log('使用' + platform + '登录');
// 这里可以添加第三方登录逻辑
});
});
// 忘记密码链接
document.querySelector('.forgot-password').addEventListener('click', function(e) {
e.preventDefault();
console.log('跳转到忘记密码页面');
// window.location.href = 'forgot-password.html';
});
// 注册链接
document.querySelector('.signup-link a').addEventListener('click', function(e) {
e.preventDefault();
console.log('跳转到注册页面');
// window.location.href = 'register.html';
});
// 页面加载时检查是否有记住的用户
window.addEventListener('load', function() {
const rememberedUser = localStorage.getItem('rememberedUser');
if (rememberedUser) {
document.getElementById('username').value = rememberedUser;
document.getElementById('remember').checked = true;
}
});
</script>
</body>
</html>
这个登录页面包含了以下特性：
🎨 设计特点
- 现代化界面：使用渐变背景和卡片式设计
- 响应式布局：适配不同屏幕尺寸
- 动画效果：悬停和点击动画提升用户体验
🔧 功能特性
- 表单验证：用户名和密码必填验证
- 密码显示切换：可以显示/隐藏密码
- 记住登录状态：使用localStorage保存用户名
- 错误提示：友好的错误和成功消息提示
- 社交登录：提供第三方登录选项
📱 交互功能
- 输入框焦点效果：边框颜色变化
- 按钮悬停效果：阴影和位移动画
- 表单提交处理：模拟登录过程
- 消息提示系统：成功/错误消息显示
🛠️ 技术实现
- 纯HTML/CSS/JavaScript：无需外部依赖
- 现代CSS特性：Flexbox、Grid、CSS变量
- 本地存储：localStorage保存用户偏好
- 事件处理：完整的用户交互逻辑
你可以根据需要修改样式、添加更多验证逻辑或集成真实的后端API,这个页面可以作为登录功能的基础模板。
（图片来源网络，侵删）
