我来帮你创建一个现代化的招聘网站登录页面,这个设计将包含登录和注册功能，具有专业的视觉效果和良好的用户体验。
（图片来源网络，侵删）
<!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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 100%;
max-width: 900px;
display: flex;
min-height: 600px;
}
.left-panel {
flex: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.left-panel::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: float 20s infinite linear;
}
@keyframes float {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.logo {
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.logo::before {
content: '💼';
font-size: 40px;
}
.tagline {
font-size: 24px;
margin-bottom: 30px;
opacity: 0.9;
}
.features {
list-style: none;
margin-bottom: 40px;
}
.features li {
padding: 10px 0;
display: flex;
align-items: center;
gap: 15px;
opacity: 0.9;
transition: opacity 0.3s;
}
.features li:hover {
opacity: 1;
}
.features li::before {
content: '✓';
background: rgba(255, 255, 255, 0.2);
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.right-panel {
flex: 1;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-header h2 {
font-size: 28px;
color: #333;
margin-bottom: 10px;
}
.form-header p {
color: #666;
font-size: 14px;
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 30px;
background: #f5f5f5;
padding: 5px;
border-radius: 10px;
}
.tab {
flex: 1;
padding: 10px;
text-align: center;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
color: #666;
}
.tab.active {
background: white;
color: #667eea;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.form-container {
position: relative;
min-height: 300px;
}
.form {
display: none;
animation: fadeIn 0.3s;
}
.form.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-size: 14px;
font-weight: 500;
}
.form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s;
}
.form-group input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.form-group input::placeholder {
color: #999;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.remember-me {
display: flex;
align-items: center;
gap: 8px;
}
.remember-me input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.forgot-password {
color: #667eea;
text-decoration: none;
font-size: 14px;
transition: color 0.3s;
}
.forgot-password:hover {
color: #764ba2;
text-decoration: underline;
}
.submit-btn {
width: 100%;
padding: 14px;
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;
position: relative;
overflow: hidden;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.submit-btn:active {
transform: translateY(0);
}
.divider {
text-align: center;
margin: 25px 0;
position: relative;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e0e0e0;
}
.divider span {
background: white;
padding: 0 15px;
color: #999;
font-size: 14px;
position: relative;
}
.social-login {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.social-btn {
flex: 1;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 10px;
background: white;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 14px;
color: #333;
}
.social-btn:hover {
border-color: #667eea;
background: #f8f9ff;
}
.social-btn.wechat:hover {
border-color: #07C160;
color: #07C160;
}
.social-btn.qq:hover {
border-color: #12B7F5;
color: #12B7F5;
}
.signup-link {
text-align: center;
color: #666;
font-size: 14px;
}
.signup-link a {
color: #667eea;
text-decoration: none;
font-weight: 600;
transition: color 0.3s;
}
.signup-link a:hover {
color: #764ba2;
text-decoration: underline;
}
.error-message {
background: #fee;
color: #c33;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
.success-message {
background: #efe;
color: #3c3;
padding: 10px 15px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 14px;
display: none;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
max-width: 400px;
}
.left-panel {
padding: 40px 30px;
min-height: 200px;
}
.right-panel {
padding: 40px 30px;
}
.tagline {
font-size: 20px;
}
.features {
display: none;
}
}
</style>
</head>
<body>
<div class="container">
<div class="left-panel">
<div class="logo">智聘网</div>
<h1 class="tagline">连接优秀人才与理想职位</h1>
<ul class="features">
<li>海量优质职位等你来</li>
<li>智能匹配，精准推荐</li>
<li>专业HR在线沟通</li>
<li>安全可靠的求职环境</li>
</ul>
</div>
<div class="right-panel">
<div class="form-header">
<h2>欢迎回来</h2>
<p>登录您的账户，开启求职之旅</p>
</div>
<div class="tabs">
<div class="tab active" onclick="switchTab('login')">登录</div>
<div class="tab" onclick="switchTab('register')">注册</div>
</div>
<div class="form-container">
<div class="error-message" id="errorMessage"></div>
<div class="success-message" id="successMessage"></div>
<!-- 登录表单 -->
<form class="form active" id="loginForm" onsubmit="handleLogin(event)">
<div class="form-group">
<label for="loginEmail">邮箱/手机号</label>
<input type="text" id="loginEmail" placeholder="请输入您的邮箱或手机号" required>
</div>
<div class="form-group">
<label for="loginPassword">密码</label>
<input type="password" id="loginPassword" placeholder="请输入您的密码" required>
</div>
<div class="form-options">
<label class="remember-me">
<input type="checkbox" id="rememberMe">
<span>记住我</span>
</label>
<a href="#" class="forgot-password">忘记密码？</a>
</div>
<button type="submit" class="submit-btn">立即登录</button>
</form>
<!-- 注册表单 -->
<form class="form" id="registerForm" onsubmit="handleRegister(event)">
<div class="form-group">
<label for="registerName">姓名</label>
<input type="text" id="registerName" placeholder="请输入您的姓名" required>
</div>
<div class="form-group">
<label for="registerEmail">邮箱</label>
<input type="email" id="registerEmail" placeholder="请输入您的邮箱" required>
</div>
<div class="form-group">
<label for="registerPhone">手机号</label>
<input type="tel" id="registerPhone" placeholder="请输入您的手机号" pattern="[0-9]{11}" required>
</div>
<div class="form-group">
<label for="registerPassword">密码</label>
<input type="password" id="registerPassword" placeholder="请设置您的密码（至少6位）" minlength="6" required>
</div>
<div class="form-group">
<label for="confirmPassword">确认密码</label>
<input type="password" id="confirmPassword" placeholder="请再次输入密码" required>
</div>
<button type="submit" class="submit-btn">立即注册</button>
</form>
<div class="divider">
<span>或</span>
</div>
<div class="social-login">
<button class="social-btn wechat" onclick="socialLogin('wechat')">
<span>📱</span> 微信
</button>
<button class="social-btn qq" onclick="socialLogin('qq')">
<span>🐧</span> QQ
</button>
</div>
<div class="signup-link" id="signupLink">
还没有账户？<a href="#" onclick="switchTab('register')">立即注册</a>
</div>
</div>
</div>
</div>
<script>
// 切换登录/注册标签
function switchTab(tab) {
const tabs = document.querySelectorAll('.tab');
const forms = document.querySelectorAll('.form');
const signupLink = document.getElementById('signupLink');
tabs.forEach(t => t.classList.remove('active'));
forms.forEach(f => f.classList.remove('active'));
if (tab === 'login') {
tabs[0].classList.add('active');
document.getElementById('loginForm').classList.add('active');
signupLink.innerHTML = '还没有账户？<a href="#" onclick="switchTab(\'register\')">立即注册</a>';
} else {
tabs[1].classList.add('active');
document.getElementById('registerForm').classList.add('active');
signupLink.innerHTML = '已有账户？<a href="#" onclick="switchTab(\'login\')">立即登录</a>';
}
// 隐藏消息
hideMessages();
}
// 处理登录
function handleLogin(event) {
event.preventDefault();
const email = document.getElementById('loginEmail').value;
const password = document.getElementById('loginPassword').value;
const rememberMe = document.getElementById('rememberMe').checked;
// 简单的验证逻辑
if (email === 'admin@zhpin.com' && password === '123456') {
showMessage('success', '登录成功！正在跳转...');
setTimeout(() => {
// 这里可以跳转到主页
console.log('跳转到主页');
}, 1500);
} else {
showMessage('error', '邮箱或密码错误，请重试');
}
}
// 处理注册
function handleRegister(event) {
event.preventDefault();
const name = document.getElementById('registerName').value;
const email = document.getElementById('registerEmail').value;
const phone = document.getElementById('registerPhone').value;
const password = document.getElementById('registerPassword').value;
const confirmPassword = document.getElementById('confirmPassword').value;
// 验证密码是否一致
if (password !== confirmPassword) {
showMessage('error', '两次输入的密码不一致');
return;
}
// 验证手机号格式
if (!/^1[3-9]\d{9}$/.test(phone)) {
showMessage('error', '请输入正确的手机号格式');
return;
}
// 模拟注册成功
showMessage('success', '注册成功！请登录');
setTimeout(() => {
switchTab('login');
}, 1500);
}
// 社交登录
function socialLogin(platform) {
showMessage('success', `正在使用${platform === 'wechat' ? '微信' : 'QQ'}登录...`);
setTimeout(() => {
console.log(`${platform}登录成功`);
}, 1500);
}
// 显示消息
function showMessage(type, message) {
const errorMsg = document.getElementById('errorMessage');
const successMsg = document.getElementById('successMessage');
hideMessages();
if (type === 'error') {
errorMsg.textContent = message;
errorMsg.style.display = 'block';
} else {
successMsg.textContent = message;
successMsg.style.display = 'block';
}
// 3秒后自动隐藏
setTimeout(hideMessages, 3000);
}
// 隐藏消息
function hideMessages() {
document.getElementById('errorMessage').style.display = 'none';
document.getElementById('successMessage').style.display = 'none';
}
// 忘记密码处理
document.querySelector('.forgot-password').addEventListener('click', function(e) {
e.preventDefault();
const email = document.getElementById('loginEmail').value;
if (email) {
showMessage('success', '密码重置链接已发送到您的邮箱');
} else {
showMessage('error', '请先输入您的邮箱地址');
}
});
</script>
</body>
</html>
这个招聘网站登录页面具有以下特点：
设计特色：
- 现代化界面 - 使用渐变背景和卡片式设计，视觉效果专业
- 双栏布局 - 左侧展示平台优势，右侧提供登录注册功能
- 响应式设计 - 适配移动端和桌面端
功能特性：
- 登录/注册切换 - 平滑的标签页切换动画
- 表单验证 - 实时验证用户输入
- 社交登录 - 支持微信和QQ快速登录
- 记住密码 - 提供用户体验优化
- 忘记密码 - 密码找回功能
- 消息提示 - 友好的成功/错误提示
交互细节：
（图片来源网络，侵删）
- 输入框聚焦效果
- 按钮悬停动画
- 表单切换淡入效果
- 错误提示自动消失
- 模拟登录验证（测试账号：admin@zhpin.com / 123456）
这个设计既专业又现代,适合作为招聘网站的登录页面使用。
（图片来源网络，侵删）
