Typesetting a community school homepage

先决条件:	在尝试此评估之前，您应该已经完成了本单元中的所有文章。
目的:	测试CSS文本造型技术的理解。

初始点

要开始评估，您应该:

• Go and grab the HTML and CSS files for the exercise, and the provided external link icon.
• Make a copy of them on your local computer.

工程概要

你已经被提供了一些虚拟社区学院的主页的原始HTML，加上一些CSS，将页面样式设置为两列布局，并提供一些其他的基本样式。 你要在CSS文件底部的注释下面写CSS添加，以确保很容易标记已经完成的位。 不要担心，如果一些选择器是重复的; 我们会让你在这种情况下。

字体:

• First of all, download a couple of free-to-use fonts. Because this is a college, the fonts should be chosen to give the page a fairly serious, formal, trustworthy feel — a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice.
• Use a suitable service to generate bulletproof @font-face code for these two fonts.
• Apply your body font to the whole page, and your heading font to your headings.

一般文本样式:

• Give the page a site-wide font-size of 10px.
• Give your headings and other element types appropriate font-sizes defined using a suitable relative unit.
• Give your body text a suitable line-height.
• Center your top level heading on the page.
• Give your headings a little bit of letter-spacing to make them not too too squashed, and allow the letters to breathe a bit.
• Give your body text some letter-spacing and word-spacing, as appropriate.
• Give the first paragraph after each heading in the <section> a little bit of text-indentation, say 20px.

链接:

• Give the link, visited, focus, and hover states some colors that go with the color of the horizontal bars at the top and bottom of the page.
• Make it so that links are underlined by default, but when you hover or focus them, the underline disappears.
• Remove the default focus outline from ALL the links on the page.
• Give the active state a noticeably different styling so it stands out nicely, but make it still fit in with the overall page design.
• Make it so that external links have the external link icon inserted next to them.

列表:

• Make sure the spacing of your lists and list items works well with the styling of the overall page. Each list item should have the same line-height as a paragraph line, and each list should have the same spacing at its top and bottom as you have between paragraphs.
• Give your list items a nice bullet, appropriate for the design of the page. It is up to you whether you choose a custom bullet image or something else.

导航菜单:

• Style your navigation menu so that it has an appropriate look for the look and feel for the page.

提示和提示

• You don't need to edit the HTML in any way for this exercise.
• You don't necessarily have to make the nav menu look like buttons, but it needs to be a bit taller so that it doesn't look silly on the side of the page; also remember that you need to make this one a vertical nav menu.

例子

以下屏幕截图显示了完成的设计可以是什么样子的示例:

alt ="">

评定

如果您作为有组织课程的一部分参加此评估，您应该能够将您的工作交给您的老师/导师进行标记。 如果您是自学习的，那么您可以轻松地通过 dev-mdc 邮件列表，或者在 #mdn IRC频道中。 org / IRC"class ="external"> Mozilla IRC 。 尝试练习第一 - 没有什么可以通过作弊获得！