页面主体

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 50 课，共 76 课。

挑战

简单

在这个项目中，我们将构建并设计一个简单的登录表单。这个项目将帮助你练习 CSS 的核心概念，包括：
✅ 在网页上完美居中元素
✅ 为输入框和按钮等表单元素设置样式
✅ 使用边框、阴影和间距
✅ 为设计发挥创意留出空间

完成项目后，你将得到一个样式精美、外观现代的登录表单，效果类似于下图。

为 <body> 标签应用样式。按照以下步骤操作：

将背景颜色设为你选择的浅色。
使用 Flexbox，让表单水平和垂直居中。
将页面高度设为 100vh，这样即使调整页面大小，表单也会保持居中。

亲手试试

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>