CSS Login

网站或应用程序中最重要的页面之一是登录页面，它允许授权用户访问整个网站或其中的一部分。登录/注册页面是用户在受密码保护的网站上看到的第一个页面。无论是登录页面还是注册页面，它都必须具有视觉吸引力、直观且简单。

任何需要用户身份验证的网站或程序都必须先创建一个登录页面。用户可以通过它安全地登录并访问他们的数据。本教程将使用 CSS 代码设计一个简单的 HTML 登录页面。在本指南的帮助下，您可以轻松创建一个用户友好、专业外观的登录页面。使用 HTML 和 CSS，您将学习如何创建一个带有用户名和密码的基本登录页面。

关于超文本标记语言，请参阅 HTML。它是创建网页最重要的标记语言。在网页上，它用于显示文本、图片、音乐和视频。

CSS 是 Cascading Style Sheets 的缩写。HTML 页面使用它进行样式设置。CSS 用于样式，并包含一组格式规则，可用于创建响应式网页。它用于设计过程。（.CSS）是 CSS 的文件扩展名。

我们将使用 HTML 和 CSS 来创建一个登录页面。HTML 登录页面收集用户数据，并包含一个提交按钮，用于将信息发送到服务器端进行处理。但是，我们在这里不是处理后端任务，我们的目标是构建一个登录页面。

在开始处理 HTML 登录页面之前，我们必须确定以下几点：

1. HTML 表单
2. Flexbox 的属性
3. CSS

我们将制作什么？

HTML 和 CSS 用于登录页面的样式和组织。我们将首先使用 HTML 构建基本框架，然后使用 CSS 使其看起来很棒。

首先，我们将回顾登录页面的 HTML 代码，然后转到 CSS 来改进其外观。

构建登录页面的 HTML 结构

基本上，将使用 HTML 的 <form> 标签。HTML 表单易于用于从用户那里收集数据。

action 属性也可以用于提供服务器端活动，尽管这超出了我们讨论的范围。这里有更多关于表单的信息。

让我们从头开始编写基本 HTML 结构。

输出

action 属性将留空，因为如前所述，我们在没有服务器端过程的情况下构建登录页面。之后将是收集和允许用户输入其密码和用户名的容器。原始结构必须首先给出；表单容器将在之后进行样式设置。

将包含两个 <div> 组件：一个用于表单标题，另一个用于用户数据收集。

输出

虽然 div 容器不可见，但在我们将输入字段添加到表单后，更改将显而易见。

<input> 标签将指定用户在主容器中的输入。在我们的情况下，我们需要文本（用于用户名）和密码输入类型。我们将使用 <label> 标签来描述这些输入字段，但请确保 <label for=" "> 的名称与它的 input> 标签的 name 属性相同。每个表单控件（输入字段）只能与一个 label> 元素关联。使用相同的名称连接 <label> 和 <input> 组件至关重要。

用户名的输入类型是 text，我们将编写 <input required>，因为用户必须提供他们的用户名和密码。

输出