用trae cn写一个简单登录页面

JavaScript 代码：用于处理表单提交事件，验证用户名和密码是否为空，并显示相应的错误消息。页面主体样式：设置背景颜色为浅灰色，使用 Flexbox 布局将登录容器水平和垂直居中。表单包含用户名和密码输入框，以及一个登录按钮。登录容器样式：设置背景颜色为白色，添加内边距、圆角边框和轻微阴影效果。全局样式重置：清除所有元素的默认外边距和内边距，并设置盒模型为。其他样式：包括标题、表单组、标签、

嘟嘟嘟！￥

604人浏览 · 2025-07-19 12:55:07

嘟嘟嘟！￥ · 2025-07-19 12:55:07 发布

   <!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>
        /* 全局样式重置 */
        * {
            margin: 0;
            /* 清除默认外边距 */
            padding: 0;
            /* 清除默认内边距 */
            box-sizing: border-box;
            /* 盒模型设置为border-box，确保padding和border不增加元素总宽度 */
            font-family: 'Arial', sans-serif;
            /* 设置全局字体 */
        }

        /* 页面主体样式 */
        body {
            background-color: #f0f2f5;
            /* 设置浅灰色背景 */
            display: flex;
            /* 使用flex布局 */
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            height: 100vh;
            /* 高度占满整个视口 */
        }

        /* 登录容器样式 */
        .login-container {
            background-color: white;
            /* 白色背景 */
            padding: 2rem 3rem;
            /* 内边距：上下2rem，左右3rem */
            border-radius: 10px;
            /* 圆角边框 */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            /* 轻微阴影效果 */
            width: 100%;
            /* 宽度占满父容器 */
            max-width: 400px;
            /* 最大宽度限制为400px */
        }

        /* 标题样式 */
        h2 {
            text-align: center;
            /* 文本居中 */
            margin-bottom: 1.5rem;
            /* 底部外边距 */
            color: #1a73e8;
            /* 蓝色文字 */
        }

        /* 表单组样式 */
        .form-group {
            margin-bottom: 1rem;
            /* 底部外边距，分隔各个表单元素 */
        }

        /* 标签样式 */
        label {
            display: block;
            /* 块级元素，独占一行 */
            margin-bottom: 0.5rem;
            /* 底部外边距 */
            color: #5f6368;
            /* 灰色文字 */
            font-weight: 500;
            /* 中等字重 */
        }

        /* 输入框样式 */
        input {
            width: 100%;
            /* 宽度占满父容器 */
            padding: 0.8rem;
            /* 内边距 */
            border: 1px solid #dadce0;
            /* 边框 */
            border-radius: 5px;
            /* 圆角边框 */
            font-size: 1rem;
            /* 字体大小 */
        }

        /* 输入框获取焦点时的样式 */
        input:focus {
            outline: none;
            /* 移除默认轮廓 */
            border-color: #1a73e8;
            /* 边框颜色变为蓝色 */
            box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
            /* 蓝色阴影效果 */
        }

        /* 按钮样式 */
        button {
            width: 100%;
            /* 宽度占满父容器 */
            padding: 0.8rem;
            /* 内边距 */
            background-color: #1a73e8;
            /* 蓝色背景 */
            color: white;
            /* 白色文字 */
            border: none;
            /* 无边框 */
            border-radius: 5px;
            /* 圆角边框 */
            font-size: 1rem;
            /* 字体大小 */
            font-weight: 500;
            /* 中等字重 */
            cursor: pointer;
            /* 鼠标悬停时显示手型光标 */
            transition: background-color 0.3s;
            /* 背景颜色过渡效果 */
        }

        /* 按钮悬停样式 */
        button:hover {
            background-color: #1557b0;
            /* 深色背景 */
        }

        /* 错误消息样式 */
        .error-message {
            color: #d93025;
            /* 红色文字 */
            font-size: 0.875rem;
            /* 小字体 */
            margin-top: 0.5rem;
            /* 顶部外边距 */
            display: none;
            /* 默认隐藏 */
        }
    </style>
</head>

<body>
    <!-- 登录容器 -->
    <div class="login-container">
        <h2>用户登录</h2>
        <!-- 登录表单 -->
        <form id="loginForm">
            <!-- 用户名输入组 -->
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" required>
                <div class="error-message" id="usernameError">请输入用户名</div>
            </div>
            <!-- 密码输入组 -->
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" required>
                <div class="error-message" id="passwordError">请输入密码</div>
            </div>
            <!-- 登录按钮 -->
            <button type="submit">登录</button>
        </form>
    </div>

    <script>
        // 获取表单元素并添加提交事件监听器
        document.getElementById('loginForm').addEventListener('submit', function (e) {
            e.preventDefault(); // 阻止表单默认提交行为

            // 获取输入框和错误消息元素
            const username = document.getElementById('username').value.trim(); // 获取用户名并去除前后空格
            const password = document.getElementById('password').value.trim(); // 获取密码并去除前后空格
            const usernameError = document.getElementById('usernameError'); // 用户名错误消息元素
            const passwordError = document.getElementById('passwordError'); // 密码错误消息元素

            // 重置错误消息（隐藏）
            usernameError.style.display = 'none';
            passwordError.style.display = 'none';

            // 验证状态标志
            let isValid = true;

            // 验证用户名是否为空
            if (username === '') {
                usernameError.style.display = 'block'; // 显示错误消息
                isValid = false; // 设置验证失败
            }

            // 验证密码是否为空
            if (password === '') {
                passwordError.style.display = 'block'; // 显示错误消息
                isValid = false; // 设置验证失败
            }

            // 如果验证通过
            if (isValid) {
                alert('登录成功！\n用户名: ' + username); // 显示登录成功消息
                // 实际应用中，这里会发送登录请求到服务器
                // 例如：使用fetch或axios发送POST请求
                // 登录成功后可以跳转到其他页面
                // window.location.href = 'dashboard.html';
            }
        });
    </script>
</body>

</html>

包含一个登录容器（.login-container），其中包含一个标题（<h2>）和一个登录表单（<form>）。表单包含用户名和密码输入框，以及一个登录按钮。每个输入框下方都有一个错误消息元素（.error-message），默认情况下是隐藏的。