经典简约风格
这个设计简洁、清晰，专注于核心功能，适合大多数网站。
（图片来源网络，侵删）
特点：
- 布局：居中卡片式布局，视觉焦点明确。
- 样式：使用简单的CSS，带有一点阴影和圆角，提升质感。
- 交互：输入框获得焦点时有边框高亮效果。
- 图标：使用内联SVG图标，无需外部依赖。
源代码：
您可以直接将以下代码复制到一个 .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: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* 登录容器 */
.login-container {
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
width: 400px;
max-width: 90%;
}
.login-container h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-weight: 600;
}
/* 表单组 */
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group input {
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s, box-shadow 0.3s;
}
/* 输入框聚焦效果 */
.form-group input:focus {
outline: none;
border-color: #4a90e2;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}
/* 图标容器 */
.icon-container {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #777;
}
/* 输入框和图标组合 */
.input-with-icon {
padding-left: 45px;
}
/* 登录按钮 */
.login-btn {
width: 100%;
padding: 15px;
background-color: #4a90e2;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.login-btn:hover {
background-color: #357abd;
}
/* 额外链接 */
.extra-links {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #666;
}
.extra-links a {
color: #4a90e2;
text-decoration: none;
margin: 0 10px;
}
.extra-links a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<h2>欢迎登录</h2>
<form action="#" method="post">
<div class="form-group">
<span class="icon-container">
<!-- 用户名图标 -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg>
</span>
<input type="text" name="username" placeholder="请输入用户名" required class="input-with-icon">
</div>
<div class="form-group">
<span class="icon-container">
<!-- 密码图标 -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v1H6V3a2 2 0 0 1 2-2zm3 6V5a3 3 0 0 0-6 0v1H3a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2zM5 5V3a3 3 0 0 1 6 0v2H5zm7 7v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
</svg>
</span>
<input type="password" name="password" placeholder="请输入密码" required class="input-with-icon">
</div>
<button type="submit" class="login-btn">登 录</button>
</form>
<div class="extra-links">
<a href="#">忘记密码?</a>
<span>|</span>
<a href="#">立即注册</a>
</div>
</div>
</body>
</html>
现代科技风格
这个设计采用了更现代的视觉元素,如渐变背景、玻璃态效果和更流畅的动画。
特点：
- 布局：全屏背景，登录框采用“玻璃态”（Glassmorphism）效果。
- 样式：使用模糊背景、半透明和柔和阴影，营造科技感。
- 交互：输入框聚焦时有平滑的放大和发光效果。
- 按钮：悬停时有填充动画。
源代码：
<!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: 'Arial', sans-serif;
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #0f2027, #203a43, #2c5364);
overflow: hidden;
}
/* 动态背景元素 */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://source.unsplash.com/random/1600x900?tech,abstract'); /* 使用随机科技感背景图 */
background-size: cover;
background-position: center;
opacity: 0.2;
z-index: -1;
}
.login-wrapper {
position: relative;
width: 400px;
}
/* 玻璃态登录框 */
.login-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 40px 35px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
color: #fff;
}
.login-box h2 {
text-align: center;
font-size: 28px;
margin-bottom: 30px;
font-weight: 300;
letter-spacing: 2px;
}
.input-field {
position: relative;
margin-bottom: 30px;
}
.input-field input {
width: 100%;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: #fff;
font-size: 16px;
transition: all 0.3s ease;
}
.input-field input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/* 输入框聚焦时的动画效果 */
.input-field input:focus {
outline: none;
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.3);
transform: scale(1.02);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.login-btn {
width: 100%;
padding: 15px;
background: transparent;
border: 1px solid #fff;
border-radius: 10px;
color: #fff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.login-btn:hover {
background: #fff;
color: #0f2027;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}
.login-btn span {
position: absolute;
width: 0;
height: 100%;
background: #fff;
left: 0;
top: 0;
z-index: -1;
transition: 0.5s;
}
.login-btn:hover span {
width: 100%;
}
.signup-link {
text-align: center;
margin-top: 25px;
font-size: 14px;
}
.signup-link a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
.signup-link a:hover {
color: #4a90e2;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
</style>
</head>
<body>
<div class="login-wrapper">
<div class="login-box">
<h2>TECH LOGIN</h2>
<form action="#" method="post">
<div class="input-field">
<input type="text" placeholder="用户名" required>
</div>
<div class="input-field">
<input type="password" placeholder="密码" required>
</div>
<button type="submit" class="login-btn">
<span></span>登 录
</button>
</form>
<div class="signup-link">
还没有账号? <a href="#">立即注册</a>
</div>
</div>
</div>
</body>
</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: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body {
display: flex;
height: 100vh;
overflow: hidden;
}
/* 左侧背景区域 */
.bg-section {
flex: 1;
background: url('https://source.unsplash.com/random/1600x900?business,office') no-repeat center center/cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
position: relative;
}
.bg-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}
.brand-info {
text-align: center;
z-index: 1;
padding: 0 20px;
}
.brand-info h1 {
font-size: 3em;
margin-bottom: 10px;
font-weight: 300;
letter-spacing: 3px;
}
.brand-info p {
font-size: 1.2em;
opacity: 0.8;
}
/* 右侧登录区域 */
.login-section {
width: 450px;
background-color: #f8f9fa;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
}
.login-form-container {
width: 100%;
}
.login-form-container h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 24px;
}
.form-item {
margin-bottom: 20px;
}
.form-item label {
display: block;
margin-bottom: 8px;
color: #555;
font-size: 14px;
font-weight: 500;
}
.form-item input {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s;
}
.form-item input:focus {
outline: none;
border-color: #007bff;
}
/* 验证码容器 */
.captcha-container {
display: flex;
align-items: center;
gap: 10px;
}
.captcha-input {
flex: 1;
}
.captcha-img {
width: 120px;
height: 42px;
background-color: #e9ecef;
border-radius: 6px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', monospace;
font-size: 24px;
font-weight: bold;
color: #333;
letter-spacing: 3px;
user-select: none;
}
.captcha-img:hover {
background-color: #dee2e6;
}
/* 记住我和忘记密码 */
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.remember-me {
display: flex;
align-items: center;
}
.remember-me input[type="checkbox"] {
margin-right: 5px;
}
.remember-me label {
font-size: 14px;
color: #666;
cursor: pointer;
}
.forgot-password {
font-size: 14px;
color: #007bff;
text-decoration: none;
}
.forgot-password:hover {
text-decoration: underline;
}
/* 登录按钮 */
.login-btn-main {
width: 100%;
padding: 14px;
background-color: #007bff;
border: none;
border-radius: 6px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s;
}
.login-btn-main:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="bg-section">
<div class="brand-info">
<h1>YOUR BRAND</h1>
<p>欢迎回来，请登录您的账户</p>
</div>
</div>
<div class="login-section">
<div class="login-form-container">
<h2>用户登录</h2>
<form action="#" method="post">
<div class="form-item">
<label for="username">用户名</label>
<input type="text" id="username" name="username" placeholder="请输入您的用户名" required>
</div>
<div class="form-item">
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请输入您的密码" required>
</div>
<div class="form-item">
<label for="captcha">验证码</label>
<div class="captcha-container">
<input type="text" id="captcha" name="captcha" class="captcha-input" placeholder="请输入验证码" required>
<div class="captcha-img" id="captchaCode" title="点击刷新验证码">A8B2</div>
</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-main">登 录</button>
</form>
</div>
</div>
<script>
// 简单的验证码刷新功能
document.getElementById('captchaCode').addEventListener('click', function() {
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789';
let captcha = '';
for (let i = 0; i < 4; i++) {
captcha += chars.charAt(Math.floor(Math.random() * chars.length));
}
this.textContent = captcha;
});
</script>
</body>
</html>
如何使用和修改
- 复制代码：选择您喜欢的设计，将完整的代码块复制到一个新的文本文件中。
- 保存文件：将文件另存为
login.html（或任何您喜欢的名字，但后缀必须是.html）。 - 打开预览：用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个
login.html文件，您就能看到登录页面了。 - 进行修改：
- ：修改
<h2>、<label>、<placeholder>等标签内的文字。 - 颜色和样式：在
<style>标签内修改background-color、color、font-size等CSS属性来改变外观。 - 背景图片：在
style或img标签中找到background-image或src属性，替换为您自己的图片链接。 - 功能：
<form>标签的action属性需要指向您的后端登录处理程序，JavaScript部分（如设计三中的验证码）可以根据您的需求进行扩展。
- ：修改
希望这些源代码能帮助您快速构建出满意的登录页面！
（图片来源网络，侵删）
（图片来源网络，侵删）
