创建用户名片 | HTML 与 CSS 教程

简介

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

👀 预览

🎯 任务

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

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

🏆 成果

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicConceptsGroup -.-> css/properties("Properties") css/CoreLayoutGroup -.-> css/box_model("Box Model") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/DynamicStylingGroup -.-> css/transformations("Transformations") subgraph Lab Skills css/selectors -.-> lab-300116{{"创建视觉上吸引人的名片"}} css/properties -.-> lab-300116{{"创建视觉上吸引人的名片"}} css/box_model -.-> lab-300116{{"创建视觉上吸引人的名片"}} css/positioning -.-> lab-300116{{"创建视觉上吸引人的名片"}} css/transformations -.-> lab-300116{{"创建视觉上吸引人的名片"}} end

设置项目

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

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

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

这里：

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

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

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

使名片和头像居中

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

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

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

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

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

✨ 查看解决方案并练习

总结

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