设计个人简介页面

通过你在过去几节课中学到的知识，你应该能够使用 CSS 格式化简单的文本文档，并为它们添加自己的样式。本次评估将给你一个机会来实践。

先决条件 在尝试此评估之前，您应该已经学习了本模块中的所有文章，并且对 HTML 基础知识有所了解（学习 HTML 简介）。
目标 体验一些 CSS 并测试您新获得的知识。

起点

您可以在下面的实时编辑器中工作，或者可以 下载起始文件 在您自己的编辑器中使用。这是一个包含 HTML 和起始 CSS（在文档头部）的单页面。如果您愿意，您可以在创建本地计算机上的示例时将此 CSS 移动到单独的文件中并链接到它。

注意：您可以在此页面上的交互式编辑器或在线编辑器（如 CodePen、JSFiddle 或 Glitch）中尝试解决方案。

如果您遇到困难，可以通过我们的 沟通渠道 联系我们。

项目简介

以下实时示例显示了一个使用 CSS 样式化的个人简介。使用的 CSS 属性如下——每个属性都链接到 MDN 上的属性页面，这将为您提供更多使用示例。

在交互式编辑器中，您会发现一些已就位的 CSS。这使用元素选择器、类和伪类选择文档的部分内容。对这个 CSS 进行以下更改

  1. 使用 CSS 颜色关键字 hotpink 将一级标题设置为粉红色。
  2. 为标题添加一个 10px 点状的 border-bottom，使用 CSS 颜色关键字 purple。
  3. 将二级标题设置为斜体。
  4. 为用于联系信息的 ul 设置 #eeeeee 的 background-color 和 5px 实线紫色 border。使用一些 padding 将内容从边框推开。
  5. 使链接在悬停时变为 green。

提示和技巧

  • 使用 W3C CSS 验证器 捕获 CSS 中意外的错误——您可能错过的错误——以便您可以修复它们。
  • 之后，尝试在 MDN CSS 参考 中查找此页面上未提及的一些属性，并大胆尝试！
  • 请记住，这里没有错误答案——在这个学习阶段，您可以尽情享受乐趣。

示例

您最终应该得到类似此图像的内容。

Screenshot of how the example should look after completing the assessment.