这些模板都包含了HTML、CSS和必要的JavaScript，具有响应式设计，并遵循现代UI/UX原则。
（图片来源网络，侵删）
现代简约风格
这个模板设计简洁、干净，以蓝色为主色调，搭配白色背景，给人一种清爽、专业的感觉,非常适合大多数后台系统。
特点：
- 极简设计：没有多余的装饰,聚焦于登录功能。
- 卡片式布局：登录表单以卡片形式居中显示。
- 平滑过渡：输入框和按钮都有优雅的hover和focus效果。
- 响应式：在移动设备上自动适配。
在线预览
代码下载
您可以直接复制下面的代码，保存为 login.html 文件即可在浏览器中打开。
（图片来源网络，侵删）
<!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;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.login-container {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
width: 400px;
max-width: 90%;
}
.login-container h1 {
text-align: center;
color: #1a2a6c;
margin-bottom: 30px;
font-weight: 600;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
color: #333;
font-weight: 500;
}
.input-group input {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.input-group input:focus {
outline: none;
border-color: #1a2a6c;
box-shadow: 0 0 0 2px rgba(26, 42, 108, 0.2);
}
.login-btn {
width: 100%;
padding: 12px;
background-color: #1a2a6c;
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
.login-btn:hover {
background-color: #0f1a4c;
transform: translateY(-2px);
}
.login-btn:active {
transform: translateY(0);
}
.footer-text {
text-align: center;
margin-top: 20px;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="login-container">
<h1>欢迎登录</h1>
<form id="loginForm">
<div class="input-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit" class="login-btn">登 录</button>
</form>
<p class="footer-text">© 2025 Your Company. All rights reserved.</p>
</div>
<script>
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
// 这里添加登录逻辑，例如AJAX请求
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
alert(`登录功能尚未实现，您输入的用户名是: ${username}`);
// 实际项目中，这里应该是一个发送到服务器的AJAX请求
// fetch('/api/login', {
// method: 'POST',
// headers: { 'Content-Type': 'application/json' },
// body: JSON.stringify({ username, password })
// })
// .then(response => response.json())
// .then(data => {
// if(data.success) {
// window.location.href = '/dashboard';
// } else {
// alert('登录失败：' + data.message);
// }
// });
});
</script>
</body>
</html>
科技感3D风格
这个模板更具视觉冲击力，使用了3D变换、玻璃态和动态粒子背景，非常适合科技、金融或数据分析类后台。
特点：
- 3D翻转效果：登录和注册表单可以翻转切换。
- 玻璃态设计：半透明的背景和模糊效果,营造现代感。
- 动态粒子背景：使用
particles.js库创建酷炫的背景动画。 - 高级交互：丰富的动画和过渡效果。
在线预览
代码下载
由于这个模板依赖 particles.js，您需要将代码保存到同一个文件夹中,并引入外部库。
（图片来源网络，侵删）
创建 index.html 文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">科技感3D登录页</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
/* 全局样式和动画 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(45deg, #1a2a6c, #b21f1f, #1a2a6c);
background-size: 400% 400%;
animation: gradientBG 15s ease infinite;
overflow: hidden;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.container {
position: relative;
width: 400px;
height: 400px;
perspective: 1000px;
z-index: 2;
}
.form-box {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.6s;
}
.form-box.active-side-signup {
transform: rotateY(180deg);
}
.login-container, .signup-container {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
padding: 40px 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.signup-container {
transform: rotateY(180deg);
}
h1 {
color: #fff;
font-size: 2.5em;
margin-bottom: 30px;
text-align: center;
}
.input-group {
width: 100%;
margin-bottom: 20px;
position: relative;
}
.input-group input {
width: 100%;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
color: #fff;
font-size: 16px;
transition: all 0.3s;
}
.input-group input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.input-group input:focus {
background: rgba(255, 255, 255, 0.2);
outline: none;
border-color: #1a2a6c;
box-shadow: 0 0 10px rgba(26, 42, 108, 0.5);
}
.btn {
width: 100%;
padding: 12px;
background: linear-gradient(45deg, #1a2a6c, #0f1a4c);
color: white;
border: none;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
margin-top: 10px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.toggle-container {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
overflow: hidden;
transition: all 0.6s;
z-index: 10;
}
.toggle-container.active-toggle-signup {
left: 0;
}
.toggle-panel {
position: absolute;
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 30px;
text-align: center;
color: #fff;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.toggle-panel h2 {
font-size: 1.5em;
margin-bottom: 10px;
}
.toggle-panel p {
font-size: 0.9em;
}
.toggle-left {
left: 0;
border-radius: 20px 0 0 20px;
}
.toggle-right {
right: 0;
border-radius: 0 20px 20px 0;
}
</style>
</head>
<body>
<div id="particles-js"></div>
<div class="container">
<div class="form-box" id="formBox">
<!-- 登录表单 -->
<div class="login-container">
<h1>登录</h1>
<form id="loginForm">
<div class="input-group">
<input type="text" placeholder="用户名或邮箱" required>
</div>
<div class="input-group">
<input type="password" placeholder="密码" required>
</div>
<button type="submit" class="btn">登录</button>
</form>
</div>
<!-- 注册表单 -->
<div class="signup-container">
<h1>注册</h1>
<form id="signupForm">
<div class="input-group">
<input type="text" placeholder="用户名" required>
</div>
<div class="input-group">
<input type="email" placeholder="邮箱" required>
</div>
<div class="input-group">
<input type="password" placeholder="密码" required>
</div>
<button type="submit" class="btn">注册</button>
</form>
</div>
<!-- 切换面板 -->
<div class="toggle-container" id="toggleContainer">
<div class="toggle-panel toggle-left" id="toggleLeft">
<h2>已有账号?</h2>
<p>点击登录</p>
</div>
<div class="toggle-panel toggle-right" id="toggleRight">
<h2>没有账号?</h2>
<p>点击注册</p>
</div>
</div>
</div>
</div>
<!-- 引入 particles.js -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// 初始化粒子背景
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle"
},
"opacity": {
"value": 0.5,
"random": false
},
"size": {
"value": 3,
"random": true
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
}
},
"retina_detect": true
});
// 切换登录/注册表单
const formBox = document.getElementById('formBox');
const toggleContainer = document.getElementById('toggleContainer');
const toggleLeft = document.getElementById('toggleLeft');
const toggleRight = document.getElementById('toggleRight');
toggleLeft.addEventListener('click', () => {
formBox.classList.remove('active-side-signup');
toggleContainer.classList.remove('active-toggle-signup');
});
toggleRight.addEventListener('click', () => {
formBox.classList.add('active-side-signup');
toggleContainer.classList.add('active-toggle-signup');
});
// 表单提交逻辑
document.getElementById('loginForm').addEventListener('submit', (e) => {
e.preventDefault();
alert('登录功能演示');
});
document.getElementById('signupForm').addEventListener('submit', (e) => {
e.preventDefault();
alert('注册功能演示');
});
</script>
</body>
</html>
企业级风格
这个模板设计非常专业、稳重，适合大型企业或政府机构的后台系统,它强调安全性和权威感。
特点：
- 稳重配色：深蓝色搭配浅灰色,营造专业和可信赖的氛围。
- 布局清晰：Logo、标题、表单、帮助信息层次分明。
- 图标增强：使用 Font Awesome 图标来提升视觉引导。
- 记住我 & 忘记密码：标准的企业级登录功能。
在线预览
代码下载
同样，直接复制代码保存为 .html 文件即可，需要引入 Font Awesome。
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #f0f2f5;
}
.login-wrapper {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 420px;
padding: 40px;
}
.login-header {
text-align: center;
margin-bottom: 30px;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
}
.logo i {
font-size: 40px;
color: #1a2a6c;
margin-right: 10px;
}
.logo h1 {
font-size: 24px;
color: #1a2a6c;
font-weight: 600;
}
.login-header p {
color: #666;
font-size: 14px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
font-size: 14px;
font-weight: 500;
}
.input-with-icon {
position: relative;
}
.input-with-icon i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.input-with-icon input {
width: 100%;
padding: 12px 15px 12px 45px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}
.input-with-icon input:focus {
border-color: #1a2a6c;
outline: none;
}
.form-options {
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 {
font-size: 14px;
color: #666;
cursor: pointer;
}
.forgot-password {
font-size: 14px;
color: #1a2a6c;
text-decoration: none;
transition: color 0.3s;
}
.forgot-password:hover {
color: #0f1a4c;
text-decoration: underline;
}
.login-btn {
width: 100%;
padding: 12px;
background-color: #1a2a6c;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.3s;
}
.login-btn:hover {
background-color: #0f1a4c;
}
.divider {
text-align: center;
margin: 25px 0;
position: relative;
}
.divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: #ddd;
}
.divider span {
background-color: #fff;
padding: 0 15px;
color: #999;
font-size: 14px;
position: relative;
}
.social-login {
display: flex;
justify-content: center;
gap: 15px;
}
.social-btn {
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
color: #666;
}
.social-btn:hover {
background-color: #f0f2f5;
border-color: #1a2a6c;
color: #1a2a6c;
}
</style>
</head>
<body>
<div class="login-wrapper">
<div class="login-header">
<div class="logo">
<i class="fas fa-shield-alt"></i>
<h1>企业门户</h1>
</div>
<p>请登录您的账户以继续</p>
</div>
<form id="loginForm">
<div class="form-group">
<label for="username">用户名</label>
<div class="input-with-icon">
<i class="fas fa-user"></i>
<input type="text" id="username" name="username" placeholder="请输入用户名" required>
</div>
</div>
<div class="form-group">
<label for="password">密码</label>
<div class="input-with-icon">
<i class="fas fa-lock"></i>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</div>
</div>
<div class="form-options">
<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">
<div class="social-btn">
<i class="fab fa-weixin"></i>
</div>
<div class="social-btn">
<i class="fab fa-qq"></i>
</div>
<div class="social-btn">
<i class="fab fa-github"></i>
</div>
</div>
</div>
<script>
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;
console.log('登录信息:', { username, password, remember });
alert(`企业登录功能演示，\n用户名: ${username}\n记住我: ${remember ? '是' : '否'}`);
});
</script>
</body>
</html>
如何选择和使用
- 直接使用：选择您最喜欢的一个模板，将代码完整复制并粘贴到一个新的
.html文件中,然后用浏览器打开即可。 - 二次开发：这些模板是很好的起点，您可以：
- 修改颜色：将 CSS 中的蓝色（如
#1a2a6c）替换为您公司的品牌色。 - 添加Logo：在
<div class="logo">中替换或添加您的 Logo 图片。 - 集成后端：将
<script>中的alert()替换为真实的fetch或axios请求，连接到您的后端 API 进行身份验证。 - 调整布局：根据您的需求调整 CSS 来改变布局和间距。
- 修改颜色：将 CSS 中的蓝色（如
希望这些模板能帮助您快速构建一个专业、美观的后台登录页面！
