挑战：排版社区学校主页 - 学习 Web 开发

起始点

你将在本地开发环境中解决此挑战；理想情况下，你应该将示例在一个完整的浏览器窗口中查看，以确保你方向正确。

在你的电脑上创建一个名为 typesetting-challenge 的新文件夹。

在该文件夹中，创建一个 index.html 文件，并将以下内容粘贴到其中。

html

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>St Huxley's Community College</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>St Huxley's Community College</h1>
    </header>

    <main>
      <section>
        <h2>Brave new world</h2>

        <p>
          It's a brave new world out there. Our children are being put in
          increasingly more competitive situations as they move through the
          different stages of their life with
          <a href="https://en.wikipedia.org/wiki/Examination">examinations</a
          >, <a href="https://en.wikipedia.org/wiki/Jobs">jobs</a>,
          <a href="https://en.wikipedia.org/wiki/Career">careers</a>, and
          other life choices. Having the wrong mindset or making the wrong
          choices can lead to problems at all stages.
        </p>

        <p>
          As concerned parents, guardians, or carers, you will no doubt want
          to give your children the best possible start in life — and you've
          come to the right place.
        </p>

        <h2>The best start in life</h2>

        <p>
          At St. Huxley's, we pride ourselves in not only giving our students
          a top-quality education, but also giving them the
          <a href="https://en.wikipedia.org/wiki/Society">societal</a> and
          <a href="https://en.wikipedia.org/wiki/Emotion">emotional</a>
          intelligence they need to win big in the future. We not only excel
          at subjects such as genetics, data mining, and chemistry, but we
          also include compulsory lessons in:
        </p>

        <ul>
          <li>Emotional resilience</li>
          <li>Critical thinking</li>
          <li>Judgement</li>
          <li>Assertion</li>
          <li>Focus and resolve</li>
        </ul>

        <p>
          If you are interested, then don't hesitate to get in touch; we'd
          love to hear from you:
        </p>

        <ol>
          <li>
            <a href="#">Call</a> or <a href="#">Email</a> us for more
            information.
          </li>
          <li>
            <a href="#">Ask for a brochure</a>, which includes a signup form.
          </li>
          <li><a href="#">Book a visit</a>!</li>
        </ol>
      </section>

      <aside>
        <h2>Top courses</h2>

        <ul>
          <li><a href="#">Genetic engineering</a></li>
          <li><a href="#">Organic Chemistry</a></li>
          <li><a href="#">Pharmaceuticals</a></li>
          <li><a href="#">Behavioral science</a></li>
          <li><a href="#">Biochemistry</a></li>
          <li><a href="#">Data mining</a></li>
          <li><a href="#">Computer security</a></li>
          <li><a href="#">Bioinformatics</a></li>
          <li><a href="#">Cybernetics</a></li>
        </ul>

        <p><a href="#">See all...</a></p>
      </aside>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Finding us</a></li>
          <li><a href="#">Courses</a></li>
          <li><a href="#">Staff</a></li>
          <li><a href="#">Media</a></li>
          <li><a href="#">Prospectus</a></li>
        </ul>
      </nav>
    </main>

    <footer>
      <p>&copy; 2025 St Huxley's Community College</p>
    </footer>
  </body>
</html>

在该文件夹中，创建一个 style.css 文件，并将以下内容粘贴到其中。

css

/* General setup */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 0 20px;
  min-width: 980px;
  max-width: 1400px;
}

/* Layout */

main {
  display: grid;
  grid-template-columns: 5fr 2fr 2fr;
  gap: 40px;
  padding: 20px 0;
}

/* header and footer */

header {
  border-bottom: 5px solid #aa6666;
}

footer {
  border-top: 5px solid #aa6666;
}

footer p {
  text-align: center;
}

下载 external-link-52.png 图标，并将其与代码文件保存在同一级别的文件夹中。
保存你的文件，并在浏览器中加载 index.html 以便测试。

项目简介

你已经获得了一个虚构社区学院主页的一些 HTML，以及一些将内容布局成三列并提供其他基本样式的 CSS。你需要在 CSS 文件底部添加规则来解决以下各部分中描述的挑战。

为页面应用字体

选择要应用于页面的标题和正文字体
- 因为这是一所大学，字体应该给网站一种相当严肃、值得信赖的感觉。为正文文本使用全站衬线字体，并为标题使用粗体/板衬字体将是合适的。
- 你可以选择使用 Google Fonts 等在线字体服务来访问字体，或者将字体文件本地下载到你的项目中。无论你选择哪种方式，都要让你的字体对你的页面可用。如果你选择使用本地字体文件，请使用合适的服务为你生成防弹的 @font-face 代码。
将你的正文字体应用于整个页面，将你的标题字体应用于你的标题。

通用文本样式

为你的标题和其他元素类型设置合适的 font-size，使用合适的相对单位定义。
为你的正文设置合适的 line-height。
将页面顶部的主要标题居中。
移除二级标题的底部外边距。
为你的标题和正文添加一些 letter-spacing，使其不过于拥挤，让字母稍微舒展一下。
为 <section> 中每个标题后的第一个段落添加一些文本缩进，例如 2rem。

链接样式

为链接、访问过、焦点和悬停状态设置一些与页面顶部和底部水平条颜色相配的颜色。
默认情况下，链接应带下划线，但在悬停或获得焦点时，下划线消失。
移除页面上所有链接的默认焦点轮廓。
使外部链接在其右侧插入外部链接图标，尺寸合适。

列表样式

确保你的列表和列表项的间距与整个页面的样式相协调。每个列表应具有与段落相同的 line-height 以及顶部和底部外边距。
为你的列表项设置适合页面设计的适当的符号样式。你可以选择自定义符号图像或其他样式。

导航菜单样式

为你的导航菜单设置样式，使其与页面协调。这很大程度上取决于你，但这里有一些提示/建议

使链接看起来像按钮，宽度与其所在的列一样，高度足以使导航项占据相当大的空间。
将导航链接文本应用于与你的标题相同的字体。
确保每个链接的可点击区域扩展到填满其父列表项的整个区域。
将每个链接内的文本居中。
将文本大写（使用 CSS，而不是编辑 HTML！）。

A screenshot of the starting state of the page. The top heading reads 'St Huxley's Community College' and the footer provides a copyright notice. There are red lines separating the header and footer from the content. The main content has three columns, one containing body text and two containing lists of links. The text is rendered with browser default styles

另一方面，以下屏幕截图展示了一个完成设计的示例外观

A screenshot of the finished challenge design. The top heading reads 'St Huxley's Community College'. There is a red line separating the header from the content. The main content has three columns, one containing body text, one containing a list of links, and a vertical navigation bar in the third column. The text is rendered with some suitable styles

点击此处显示可能的解决方案

我们完成的 CSS 如下所示

css

/* Solution: Apply fonts to the page */

@import "https://fonts.googleapis.ac.cn/css2?family=Bevan:ital@0;1&family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap";

html {
  font-family: "IBM Plex Serif", serif;
}

h1,
h2 {
  font-family: "Bevan", serif;
}

/* General setup */

* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  padding: 0 20px;
  min-width: 980px;
  max-width: 1400px;
}

/* Layout */

main {
  display: grid;
  grid-template-columns: 5fr 2fr 2fr;
  gap: 40px;
  padding: 20px 0;
}

/* Header and footer */

header {
  border-bottom: 5px solid #aa6666;
}

footer {
  border-top: 5px solid #aa6666;
}

footer p {
  text-align: center;
}

/* Solution: General text styling */

h1 {
  font-size: 3rem;
  text-align: center;
  letter-spacing: 3px;
}

h2 {
  font-size: 2rem;
  margin-bottom: 0;
  letter-spacing: 1px;
}

section h2 + p {
  text-indent: 2rem;
}

p,
li {
  line-height: 1.6;
  letter-spacing: 0.5px;
}

/* Solution: Link styling */

a {
  outline: none;
}

a[href*="http"] {
  padding-right: 16px;
  background: url("external-link-52.png") no-repeat right center;
  background-size: 14px 14px;
}

a:link,
a:visited {
  color: #aa6666;
}

a:focus,
a:hover {
  text-decoration: none;
  color: #773333;
}

/* Solution: List styling */

ul,
ol {
  margin: 1rem 0;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: lower-roman;
}

/* Solution: Navigation menu styling */

nav ul {
  padding-left: 0;
}

nav li {
  list-style-type: none;
  margin-bottom: 1rem;
}

nav li a {
  font-family: "Bevan", serif;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  line-height: 3.5;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  font-size: 1.3rem;
  font-weight: bold;
  border: 1px solid #aa6666;
}

nav li a:focus,
nav li a:hover {
  color: white;
  background: #aa6666;
}

nav li a:active {
  color: white;
  background: black;
}

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年10月16日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的错误