CSS的项目任务简介-示例

Project brief


You have been provided with some raw HTML for the homepage of an imaginary community college, plus some CSS that styles the page into a three column layout and provides some other rudimentary styling. You are to write your CSS additions below the comment at the bottom of the CSS file, to make sure it is easy to mark the bits you have done. Don't worry if some of the selectors are repetitious; we'll let you off in this instance.

Fonts:

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

General text styling:

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

Links:

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

Lists:

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

Navigation menu:

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

阅读量: 786
发布于:
修改于: