设计一个令人惊艳的登录页面

介绍

在这个项目中，你将学习如何设计一个界面美观的登录页面并为其设置样式。目标是创建一个视觉上吸引人的登录页面，提供愉快的用户体验。

👀 预览

已完成的登录页面设计

🎯 任务

在这个项目中，你将学习：

如何设置项目结构并理解提供的文件
如何为登录页面的主体和导航栏设置样式
如何为登录表单设置样式，包括头像图片、表单容器、表单元素和文本

🏆 成果

完成这个项目后，你将能够：

使用 CSS 创建一个视觉上吸引人的登录页面布局
为登录表单的不同元素设置样式，如输入字段、按钮和文本
融入图像和背景样式以增强登录页面的整体设计

设置项目结构

在这一步中，你将学习如何为登录页面设置项目结构。

├── css
│   └── style.css
├── images
│   ├── background-pic.jpg
│   ├── cat.png
│   └── icon.png
└── index.html

css/style.css 文件是你将编写 CSS 代码来设置登录页面样式的地方。images 文件夹包含项目中使用的图像文件。
在文本编辑器中打开 index.html 文件。这是包含登录页面结构的 HTML 文件。
点击 WebIDE 右下角的 Go Live 按钮来运行项目。
在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

设计主体和导航栏的样式

在这一步中，你将为登录页面的主体和导航栏设置样式。

在文本编辑器中打开 css/style.css 文件。
将以下 CSS 代码添加到该文件中：

/* 在此处添加你的 CSS 代码 */
body {
  background-image: url("../images/background-pic.jpg");
  background-size: cover;
  color: #fff;
  height: 945;
  width: 1920;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.nav-bar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin: 15px;
}

这段代码为主体设置了背景图像、导航栏样式，并在页面右上角添加了一个用于访问个人资料的图像。

设计登录表单的样式

在这一步中，你将为登录表单设置样式。

将以下 CSS 代码添加到 css/style.css 文件中：

.content > img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin-left: 125px;
  margin-top: -100px;
}

.content-container {
  margin: 100px auto;
  width: 450px;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.45);
  border-radius: 10px;
}

.form {
  text-align: center;
}

.form > h2 {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 20px;
}

button {
  width: 80px;
  height: 30px;
  border: #041c32;
  background-color: #2d4263;
  font-size: 16px;
  color: white;
  margin: 10px;
}

input {
  font-size: 20px;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
}

.text {
  text-align: center;
  margin: 10px;
}

.text > a {
  text-decoration: none;
  color: white;
}

这段代码为登录表单设置了样式，包括头像图片、表单容器、表单元素（标题、按钮和输入字段）以及表单底部的文本。

检查并测试最终结果

在这一步中，你可以测试你完成的页面与实际给出的页面的相似度。

保存对 style.css 文件所做的更改。
刷新浏览器以查看最终结果。完成前面的步骤后，你将能够学习如何通过 CSS 语法来布局和美化页面，以使你的登录页面尽可能如下所示：

图片描述

恭喜你！你已成功完成了对你的登录页面进行改造的项目。

总结

恭喜你！你已完成这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。

改造你的页面

介绍