社区学校主页排版
在本评估中，我们将测试您对本模块中涵盖的所有文本样式化技术的理解，让您为社区学校的主页设置文本样式。您可能还会在过程中获得一些乐趣。
| 先决条件 | 在尝试本评估之前，您应该已经完成了本模块中的所有文章。 |
|---|---|
| 目标 | 测试对 CSS 文本样式化技术的理解。 |
起点
项目简介
我们为您提供了一个假想的社区学院主页的原始 HTML 代码，以及一些 CSS 代码，这些代码将页面样式化为三列布局并提供一些其他基本样式。您需要在 CSS 文件底部注释下方编写 CSS 添加内容，以确保标记您所做的部分。不用担心某些选择器是否重复；在这种情况下，我们会让您通过。
字体
- 首先，下载一些免费使用的字体。因为这是一所学院，所以应该选择能够使页面看起来相当严肃、正式、值得信赖的字体：用于一般正文的衬线全局字体，再加上用于标题的无衬线或平板衬线字体可能不错。
- 使用合适的服务为这两种字体生成可靠的
@font-face代码。 - 将您的正文字体应用于整个页面，并将您的标题字体应用于您的标题。
一般文本样式
- 为页面设置
font-size为10px的全局样式。 - 为您的标题和其他元素类型使用合适的相对单位定义适当的字体大小。
- 为您的正文文本设置适当的
line-height。 - 将页面上的顶级标题居中。
- 为您的标题添加一些
letter-spacing，使它们不要太挤，让字母之间留一点空间。 - 根据需要为您的正文文本添加一些
letter-spacing和word-spacing。 - 在
<section>中每个标题后的第一段添加一些文本缩进，例如 20px。
链接
- 为链接、已访问状态、聚焦状态和悬停状态设置一些与页面顶部和底部的水平栏颜色相匹配的颜色。
- 确保链接默认情况下有下划线，但是当您将鼠标悬停在它们上面或聚焦它们时，下划线会消失。
- 从页面上的所有链接中删除默认的聚焦轮廓。
- 为活动状态设置一个明显不同的样式，使其脱颖而出，但要确保它仍然符合页面的整体设计。
- 确保外部链接旁边有外部链接图标。
列表
- 确保您的列表和列表项的间距与页面的整体样式相协调。每个列表项应与段落行具有相同的
line-height，并且每个列表应与段落之间的间距相同。 - 为您的列表项设置一个适合页面设计的漂亮项目符号。您可以选择自定义项目符号图像或其他东西，这取决于您。
导航菜单
- 样式化您的导航菜单，使其与页面协调一致。
提示和技巧
- 您不需要为此练习修改 HTML。
- 您不一定需要使导航菜单看起来像按钮，但它需要更高一些，这样它在页面旁边看起来不会很奇怪。另外请记住，您需要将其制作成一个垂直导航菜单。
