基础经典登录页面
这是一个最常见、最简洁的登录表单设计，适合大多数网站的后台或内部系统。
（图片来源网络，侵删）
特点：
- 简洁明了：专注于核心功能——登录。
- 响应式：在桌面和移动设备上都能良好显示。
- 表单验证：包含基本的HTML5验证。
完整代码
您可以直接将以下代码复制到一个 .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 {
background-color: #f4f7f6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 登录容器 */
.login-container {
background-color: #ffffff;
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
/* 标题样式 */
h2 {
text-align: center;
color: #333;
margin-bottom: 25px;
font-size: 28px;
}
/* 表单组样式 */
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 500;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus,
input[type="password"]:focus {
border-color: #007bff;
outline: none;
}
/* 登录按钮样式 */
.btn-login {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.btn-login:hover {
background-color: #0056b3;
}
/* 链接样式 */
.form-links {
text-align: center;
margin-top: 20px;
}
.form-links a {
color: #007bff;
text-decoration: none;
margin: 0 10px;
}
.form-links a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<h2>用户登录</h2>
<form action="/login" method="post">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required placeholder="请输入密码">
</div>
<button type="submit" class="btn-login">登录</button>
</form>
<div class="form-links">
<a href="#">忘记密码?</a>
<a href="#">立即注册</a>
</div>
</div>
</body>
</html>
代码解释：
-
HTML结构:
- 一个
<div class="login-container">作为整个登录框的容器，方便添加样式（如背景、阴影、圆角）。 <h2>是登录页面的标题。<form>标签包裹所有输入项，action="/login"指定了表单提交的地址，method="post"表示使用POST方法提交数据（更安全）。- 每个输入项都放在一个
<div class="form-group">中，便于CSS布局和间距控制。 <label>为输入框提供说明，for属性与输入框的id关联，点击标签时可以聚焦到输入框。<input>是输入框，type="text"是文本输入，type="password"是密码输入（输入内容会显示为圆点）。required属性是HTML5自带的简单验证，表示此字段为必填。<button type="submit">是提交按钮，点击后会触发表单的action。
- 一个
-
CSS样式:
* { box-sizing: border-box; }是一个非常重要的规则，它使得元素的padding和border不会增加其总宽度和高度，让布局更可控。body的样式使用了 Flexbox (display: flex; justify-content: center; align-items: center;)，这是实现垂直和水平居中的现代方法。.login-container的box-shadow为其添加了轻微的阴影，使其在页面上有“浮起”的立体感。focus伪类为输入框获得焦点时添加了蓝色边框，提升了用户体验。.btn-login:hover为鼠标悬停在按钮上时改变了背景色，提供了视觉反馈。
现代化带侧边栏的登录页面
这是一个更现代、视觉冲击力更强的设计，常见于SaaS产品或创意类网站。
（图片来源网络，侵删）
特点：
- 视觉吸引力强：使用渐变背景和卡片式设计。
- 信息展示：侧边栏可以放置产品介绍或欢迎语。
- 交互细节：包含切换登录/注册模式的交互。
完整代码
<!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-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login-page {
width: 100%;
max-width: 1100px;
height: 600px;
background: #fff;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
overflow: hidden;
display: flex;
}
/* 左侧信息面板 */
.info-panel {
flex: 1;
padding: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.info-panel h1 {
font-size: 2.5em;
margin-bottom: 20px;
}
.info-panel p {
font-size: 1.1em;
line-height: 1.6;
}
.info-panel i {
font-size: 5em;
margin-bottom: 30px;
opacity: 0.8;
}
/* 右侧表单面板 */
.form-panel {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-header {
text-align: center;
margin-bottom: 40px;
}
.form-header h2 {
color: #333;
font-size: 2em;
margin-bottom: 10px;
}
.form-header p {
color: #666;
}
.form-tabs {
display: flex;
margin-bottom: 30px;
border-bottom: 2px solid #eee;
}
.tab-btn {
flex: 1;
padding: 10px;
background: none;
border: none;
font-size: 1.1em;
font-weight: 600;
color: #999;
cursor: pointer;
transition: all 0.3s;
}
.tab-btn.active {
color: #667eea;
border-bottom: 2px solid #667eea;
}
.form-content {
display: none; /* 默认隐藏非活动标签页 */
}
.form-content.active {
display: block;
}
.input-group {
margin-bottom: 20px;
}
.input-group i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #999;
}
.input-field {
width: 100%;
padding: 15px 15px 15px 45px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1em;
transition: all 0.3s;
}
.input-field:focus {
border-color: #667eea;
outline: none;
}
.submit-btn {
width: 100%;
padding: 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1em;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
.form-footer {
text-align: center;
margin-top: 20px;
font-size: 0.9em;
color: #666;
}
.form-footer a {
color: #667eea;
text-decoration: none;
}
/* 响应式设计 */
@media (max-width: 768px) {
.login-page {
flex-direction: column;
height: auto;
max-height: 100vh;
}
.info-panel {
padding: 30px 20px;
}
.form-panel {
padding: 30px 20px;
}
}
</style>
</head>
<body>
<div class="login-page">
<!-- 左侧信息面板 -->
<div class="info-panel">
<i class="fas fa-rocket"></i>
<h1>欢迎回来</h1>
<p>登录您的账户，继续您的精彩旅程，我们为您准备了全新的体验和无限可能。</p>
</div>
<!-- 右侧表单面板 -->
<div class="form-panel">
<div class="form-header">
<h2>账户登录</h2>
<p>请输入您的账户信息</p>
</div>
<div class="form-tabs">
<button class="tab-btn active" onclick="switchTab('login')">登录</button>
<button class="tab-btn" onclick="switchTab('register')">注册</button>
</div>
<!-- 登录表单 -->
<div id="login-form" class="form-content active">
<form action="/login" method="post">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" class="input-field" placeholder="用户名或邮箱" required>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" class="input-field" placeholder="密码" required>
</div>
<button type="submit" class="submit-btn">立即登录</button>
</form>
<div class="form-footer">
还没有账户？ <a href="#" onclick="switchTab('register')">立即注册</a>
</div>
</div>
<!-- 注册表单 -->
<div id="register-form" class="form-content">
<form action="/register" method="post">
<div class="input-group">
<i class="fas fa-user"></i>
<input type="text" class="input-field" placeholder="用户名" required>
</div>
<div class="input-group">
<i class="fas fa-envelope"></i>
<input type="email" class="input-field" placeholder="电子邮箱" required>
</div>
<div class="input-group">
<i class="fas fa-lock"></i>
<input type="password" class="input-field" placeholder="密码" required>
</div>
<button type="submit" class="submit-btn">立即注册</button>
</form>
<div class="form-footer">
已有账户？ <a href="#" onclick="switchTab('login')">立即登录</a>
</div>
</div>
</div>
</div>
<script>
function switchTab(tabName) {
// 1. 移除所有标签页按钮的 'active' 类
const tabButtons = document.querySelectorAll('.tab-btn');
tabButtons.forEach(btn => btn.classList.remove('active'));
// 2. 隐藏所有表单内容
const formContents = document.querySelectorAll('.form-content');
formContents.forEach(content => content.classList.remove('active'));
// 3. 为当前点击的标签页按钮添加 'active' 类
event.target.classList.add('active');
// 4. 显示对应的表单内容
document.getElementById(tabName + '-form').classList.add('active');
}
</script>
</body>
</html>
代码解释：
-
HTML结构:
- 整个页面分为左右两个部分：
.info-panel(信息面板) 和.form-panel(表单面板)。 - 表单面板内增加了
.form-tabs用于切换登录和注册模式。 - 使用了两个
div分别存放登录和注册表单，通过CSS的display属性来控制显示哪一个。 - 引入了
Font Awesome图标库，为输入框添加了图标，使界面更生动。
- 整个页面分为左右两个部分：
-
CSS样式:
- 使用了
linear-gradient创建了漂亮的渐变背景。 .login-page使用display: flex;将左右两部分并排排列。.info-panel和.form-panel分别占据flex: 1，即各占一半空间。.tab-btn.active样式定义了当前激活标签页的外观。
- 使用了
-
JavaScript交互:
switchTab(tabName)函数是核心交互逻辑。- 它首先移除所有标签和表单的激活状态,然后根据传入的
tabName（如 'login' 或 'register'）来激活对应的标签和表单，实现了无刷新的页面切换效果。
如何选择和使用？
- 如果需要一个快速、通用、对浏览器兼容性要求高的登录页面，选择 范例一，它结构简单，易于理解和修改。
- 如果您的产品定位更现代化，希望给用户留下深刻的第一印象，并且有开发能力处理稍复杂的交互，选择 范例二，它的设计感和用户体验更胜一筹。
使用提示:
（图片来源网络，侵删）
- 将代码复制到文本编辑器中（如 VS Code, Sublime Text, Notepad++）。
- 保存为
.html文件，login.html。 - 用浏览器（如 Chrome, Firefox, Edge）打开这个文件即可预览效果。
- 您可以根据实际需求修改颜色、文字、字体和布局，对于范例二，您还可以将
action属性的值修改为您自己的后端API接口地址。
