创建视觉上吸引人的名片

介绍

在这个项目中，你将学习如何使用 HTML 和 CSS 创建一张用户名片。目标是创建一张视觉上吸引人且结构良好的名片，用于展示用户信息。

👀 预览

🎯 任务

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

• 如何设置项目并打开必要的文件
• 如何使用 CSS 使名片和用户头像元素居中
• 如何将左侧文本元素（等级和积分）水平居中

🏆 成果

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

• 构建一个用于名片的 HTML 页面
• 使用 CSS 对页面上的元素进行样式设置和定位
• 应用水平和垂直居中元素的技术

设置项目

在这一步中，你将设置项目并在编辑器中打开文件。

打开项目文件夹，其中包含以下文件和目录：

├── avatar.png
├── style.css
└── index.html

这里：

• index.html 是主页。
• style.css 是你需要添加所需样式的文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

使名片和头像居中

在这一步中，你将完成 style.css 中的待办事项部分，以使名片和用户头像元素居中。

1. 在 style.css 文件中找到待办事项部分。
2. 添加必要的 CSS 规则，使名片（类名为 card）和用户头像（类名为 avatar）元素水平和垂直居中。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 将更改保存到 style.css 文件。
4. 刷新浏览器以查看最终结果，最终结果如下：

恭喜！你已成功完成用户名片项目。

总结

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