改造你的页面

简介

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

👀 预览

🎯 任务

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

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

🏆 成果

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

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

Skills Graph

设置项目结构

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

1. 打开实验环境并导航到项目目录。
2. 在项目目录中，你应该会看到以下文件结构：

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

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

为主体和导航栏设置样式

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

1. 在文本编辑器中打开 css/style.css 文件。
2. 将以下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;
}

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

为登录表单设置样式

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

1. 将以下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;
}

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

检查并测试最终结果

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

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

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

总结

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