1. 学习
  2. 核心学习模块
  3. HTML
  4. 挑战：观鸟网站

挑战：构建页面内容结构

为使用 CSS 进行布局而构建页面内容结构是一项非常重要的技能，因此在此挑战中，您将接受有关思考页面外观以及选择适当的结构语义来构建布局的能力的测试。

起始点

为了解决此挑战，我们期望您创建一个简单的网站项目，可以是在您计算机硬盘的文件夹中，也可以是使用像 CodePen 或 JSFiddle 这样的在线编辑器。您所需的许多代码已经提供。

  1. 在您计算机的合适位置创建一个名为 structuring-html-challenge 的新文件夹（或打开在线编辑器并按照所需步骤创建一个新项目）。

  2. 将以下 HTML 代码保存在您文件夹中的一个名为 index.html 的文件中（或将其粘贴到在线编辑器的 HTML 面板中）。

    html
    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Birdwatching</title>
    <link
      href="https://fonts.googleapis.ac.cn/css?family=Roboto+Condensed:300%7CCinzel+Decorative:700"
      rel="stylesheet" />
  </head>

  <body>
    <h1>Birdwatching</h1>

    Home Get started Photos Gear Forum

    <h2>Welcome</h2>

    <p>
      Welcome to our fake birdwatching site. If this were a real site, it
      would be the ideal place to come to learn more about birdwatching,
      whether you are a beginner looking to learn how to get into birding, or
      an expert wanting to share ideas, tips, and photos with other
      like-minded people.
    </p>

    <p>
      So don't waste time! Get what you need, then turn off that computer and
      get out into the great outdoors!
    </p>

    <h2>Favorite photos</h2>

    <!-- Link images here. -->

    <p>
      This fake website example is CC0 — any part of this code may be reused
      in any way you wish. Original example written by Chris Mills, 2016.
    </p>

    <p>
      <a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a>
      by Lorc.
    </p>
  </body>
</html>

  3. 将以下 CSS 代码保存在您文件夹中的一个名为 style.css 的文件中（或将其粘贴到在线编辑器的 CSS 面板中）。

    css
    /* || General setup */

body {
  margin: 0;
}

html {
  font-size: 10px;
  background-color: darkgrey;
}

body {
  width: 70%;
  min-width: 800px;
  margin: 0 auto;
}

/* || typography */

h1,
h2 {
  font-family: "Cinzel Decorative", cursive;
  color: #2a2a2a;
}

p,
li {
  font-family: "Roboto Condensed", sans-serif;
  color: #2a2a2a;
}

h1 {
  font-size: 4rem;
  text-align: center;
  text-shadow: 2px 2px 10px black;
}

h2 {
  font-size: 3rem;
  text-align: center;
}

p,
li {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* || header layout */

header {
  margin-bottom: 10px;
}

main,
header,
nav,
article,
aside,
footer,
section {
  background-color: #00ff0080;
  padding: 1%;
}

h1 {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

header img {
  height: 60px;
}

nav ul {
  padding: 0;
  list-style-type: none;
  display: flex;
}

nav li {
  text-align: center;
  flex: 1;
}

nav a {
  font-size: 2rem;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
}

nav a:hover,
nav a:focus {
  color: red;
}

/* || main layout */

main {
  display: flex;
  gap: 10px;
}

article {
  flex: 4;
}

aside {
  flex: 1;
}

aside a {
  display: block;
  float: left;
  width: 50%;
}

aside img {
  max-width: 100%;
}

footer {
  margin-top: 10px;
}

稍后，您需要将以下 URL 包含在您的页面中。

项目简介

对于这个项目，您的任务是获取一个观鸟网站首页的内容，并添加结构元素，以便可以对其应用页面布局。您还需要对内容进行一些补充。

内容补充

  1. 在 <h1> 元素内，添加一个 <img> 元素，该元素将在页面上包含鸽子标志。为其提供空的替代文本（""）。
  2. “首页”、“开始”、“照片”、“装备”和“论坛”文本项应转换为导航菜单。
    1. 将它们标记为无序列表。
    2. 在每个列表项内，将文本包装在 <a> 元素中，该元素指向 URL #（创建一个虚拟链接）。
  3. 删除 <!-- Link images here. --> 注释。用一组四张“喜欢的鸟”的缩略图替换它。每个缩略图都应包含适当的替代文本来描述图像，并包装在一个 <a> 元素中，该元素链接到完整尺寸的对应图像。

结构要求

网站结构需要包含以下内容

  1. 一个标题，用于包装页面顶层标题和导航菜单列表。
  2. 导航菜单列表的额外包装器。
  3. 主内容区域包含两列 — 一个主文章，用于包含欢迎文本，以及一个侧边栏（aside），用于包含图像缩略图。
  4. 一个包含版权信息和署名的页脚。

换句话说，您需要添加一个合适的包装器来包裹

  • 标题
  • 导航菜单
  • 主内容
  • 欢迎文章
  • 图像侧边栏
  • 页脚

页面样式

如果需要，通过在提供的起始 HTML 中现有 <link> 元素下方添加另一个 <link> 元素来将提供的 CSS 应用于页面（一些在线代码编辑器会自动应用 CSS）。

提示和技巧

  • 使用 W3C HTML 验证器 来捕获 HTML 中无意发生的错误 — 这样您就可以修复它们。
  • 您无需了解任何 CSS 即可完成此挑战；您只需要将提供的 CSS 应用到您的 HTML 中。
  • 如果您遇到困难，无法设想将哪些元素放在哪里，请绘制页面布局的简单框图，并在您认为应该包裹每个块的元素上进行标记。这非常有帮助。

示例

以下屏幕截图显示了一个标记化后的首页示例。如果您在如何实现某些目标方面遇到困难，请参阅实时示例下方的解决方案。

The finished example for the challenge; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

点击此处显示解决方案

您完成的 HTML 应该看起来像这样

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Birdwatching</title>
    <link
      href="https://fonts.googleapis.ac.cn/css?family=Roboto+Condensed:300%7CCinzel+Decorative:700"
      rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
  </head>

  <body>
    <header>
      <h1>
        Birdwatching
        <img
          src="https://mdn.github.io/shared-assets/images/examples/learn/birds/dove.png"
          alt="a simple dove logo" />
      </h1>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Get started</a></li>
          <li><a href="#">Photos</a></li>
          <li><a href="#">Gear</a></li>
          <li><a href="#">Forum</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Welcome</h2>

        <p>
          Welcome to our fake birdwatching site. If this were a real site, it
          would be the ideal place to come to learn more about birdwatching,
          whether you are a beginner looking to learn how to get into birding,
          or an expert wanting to share ideas, tips, and photos with other
          like-minded people.
        </p>

        <p>
          So don't waste time! Get what you need, then turn off that computer
          and get out into the great outdoors!
        </p>
      </article>

      <aside>
        <h2>Favorite photos</h2>

        <a
          href="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-1.jpg">
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-1_th.jpg"
            alt="Small black bird, black claws, long black slender beak" />
        </a>
        <a
          href="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-2.jpg">
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-2_th.jpg"
            alt="Top half of a pretty bird with bright blue plumage on neck, light colored beak, blue headdress" />
        </a>
        <a
          href="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-3.jpg">
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-3_th.jpg"
            alt="Top half of a large bird with white plumage, very long curved narrow light colored break" />
        </a>
        <a
          href="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-4.jpg">
          <img
            src="https://mdn.github.io/shared-assets/images/examples/learn/birds/favorite-bird-4_th.jpg"
            alt="Large bird, mostly white plumage with black plumage on back and rear, long straight white beak" />
        </a>
      </aside>
    </main>

    <footer>
      <p>
        This fake website example is CC0 — any part of this code may be reused
        in any way you wish. Original example written by Chris Mills, 2016.
      </p>

      <p>
        <a href="http://game-icons.net/lorc/originals/dove.html">Dove icon</a>
        by Lorc.
      </p>
    </footer>
  </body>
</html>

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.