在日常开发中，登录页面是非常常见的一个功能。本文将通过一个代码示例，演示如何使用纯 HTML 和 CSS 创建一个简洁、美观的登录页面。
完整代码示例
将以下代码保存为一个 HTML 文件（如 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>登录页面示例</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 登录框样式 */
.login-container {
width: 100%;
max-width: 400px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* 标题样式 */
.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
/* 表单项样式 */
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 登录按钮样式 */
.btn-login {
width: 100%;
background: #4CAF50;
color: white;
border: none;
padding: 12px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
.btn-login:hover {
background: #45a049;
}
/* 额外链接样式 */
.login-container .extra-links {
text-align: center;
margin-top: 15px;
}
.login-container .extra-links a {
color: #007BFF;
text-decoration: none;
}
.login-container .extra-links a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<h2>登录</h2>
<form action="/submit-login" method="POST">
<!-- 用户名输入框 -->
<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>
<input type="password" id="password" name="password" placeholder="请输入密码" required>
</div>
<!-- 登录按钮 -->
<button type="submit" class="btn-login">登录</button>
<!-- 额外链接 -->
<div class="extra-links">
<p>
<a href="#">忘记密码？</a> |
<a href="#">注册账号</a>
</p>
</div>
</form>
</div>
</body>
</html>代码详解
-
页面结构：
-
<div class="login-container">：-
登录框的主容器，居中显示并提供背景和阴影效果。
-
-
<form>：-
定义表单，
action指向数据提交的接口，method使用 POST 方法。
-
-
表单字段：
-
用户名和密码分别用
<input type="text">和<input type="password">实现。
-
-
按钮：
-
使用
<button>创建登录按钮，并设置样式。
-
-
-
样式设计：
-
背景：
-
设置
body的背景颜色为浅灰色，使用flexbox将内容垂直水平居中。
-
-
阴影效果：
-
给登录框添加
box-shadow，增加立体感。
-
-
交互动画：
-
登录按钮添加
hover效果，鼠标悬停时改变背景颜色。
-
-
-
响应式设计：
-
使用
max-width限制登录框的宽度，在不同屏幕尺寸下保持良好的显示效果。 -
通过
viewport元标签确保页面在移动设备上显示正常。
-
运行效果
-
登录框居中，带有圆角和阴影，简洁且美观。
-
用户名、密码输入框与按钮间距适中，布局清晰。
-
登录按钮悬停时背景颜色变化，提供良好的用户交互体验。
-
底部的“忘记密码”和“注册账号”链接提供额外导航选项。
扩展功能
-
后端支持：
-
配合后端语言（如 Python、Java 等），实现用户登录验证。
-
-
JavaScript 校验：
-
在提交表单前，使用 JavaScript 检查用户名和密码是否符合格式要求。
-
-
添加图标：
-
在用户名和密码输入框前加上图标，进一步优化用户体验。
-
