Typesetting a community school homepage

初始點(diǎn)

要開(kāi)始評(píng)估，您應(yīng)該:

• 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.

工程概要

你已經(jīng)被提供了一些虛擬社區(qū)學(xué)院的主頁(yè)的原始HTML，加上一些CSS，將頁(yè)面樣式設(shè)置為兩列布局，并提供一些其他的基本樣式。 你要在CSS文件底部的注釋下面寫(xiě)CSS添加，以確保很容易標(biāo)記已經(jīng)完成的位。 不要擔(dān)心，如果一些選擇器是重復(fù)的; 我們會(huì)讓你在這種情況下。

字體:

• 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.

導(dǎo)航菜單:

• 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.

例子

以下屏幕截圖顯示了完成的設(shè)計(jì)可以是什么樣子的示例:

alt ="">

評(píng)定

如果您作為有組織課程的一部分參加此評(píng)估，您應(yīng)該能夠?qū)⒛墓ぷ鹘唤o您的老師/導(dǎo)師進(jìn)行標(biāo)記。 如果您是自學(xué)習(xí)的，那么您可以輕松地通過(guò) dev-mdc 郵件列表，或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習(xí)第一 - 沒(méi)有什么可以通過(guò)作弊獲得！