web登录页面设计html代码

作者：刀魂使者发布日期:2026-07-09 浏览:43

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web 登录页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .login-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }
        .login-container h2 {
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .form-group button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
        .form-group button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <h2>登录</h2>
        <form action="/login" method="POST">
            <div class="form-group">
                <input type="text" id="username" name="username" placeholder="用户名" required>
            </div>
            <div class="form-group">
                <input type="password" id="password" name="password" placeholder="密码" required>
            </div>
            <div class="form-group">
                <button type="submit">登录</button>
            </div>
        </form>
    </div>
</body>
</html>

解释说明：

HTML结构：
- 使用了标准的HTML5文档结构，包含<html>、<head>和<body>标签。
- 在<body>中创建了一个居中的登录表单容器.login-container。
CSS样式：
- 设置了页面背景颜色为浅灰色，并使用Flexbox布局使登录表单居中显示。
- .login-container设置了白色背景、内边距、圆角和阴影效果，使其看起来更美观。
- 表单元素（输入框和按钮）设置了宽度为100%，并添加了一些基本的样式如边框、填充和圆角。
表单功能：
- 表单包含两个输入框，分别用于输入用户名和密码。
- 提交按钮使用了绿色背景，并在悬停时改变颜色以增强用户体验。
- 表单的action属性设置为/login，表示提交后会将数据发送到服务器端的/login路径进行处理。

上一篇：html常用标记有哪些

下一篇：html 禁止缩放