在日常开发中，登录页面是非常常见的一个功能。本文将通过一个代码示例，演示如何使用纯 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 检查用户名和密码是否符合格式要求。
-
-
添加图标：
-
在用户名和密码输入框前加上图标，进一步优化用户体验。
-
