挑战：调整内容面板大小并进行装饰

在此挑战中，您将获得一个经过少量样式设置的页面结构，该结构会渲染一个包含文本和图片的内容面板，顶部有一个标题，底部有一个按钮栏。我们希望您按照说明对其进行大小调整和装饰，从而产生一个有趣的布局。在此过程中，我们将测试您对 CSS 值和单位、尺寸、溢出以及背景和边框的了解。

起始点

我们将让您在本地开发环境中解决此挑战；理想情况下，您应该在全浏览器窗口中查看示例，以确保您方向正确。

在您的计算机上创建一个名为 size-decorate-content-panel 的新文件夹。

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

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Challenge: Content pane with button bar</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <section class="pane">
      <h1>Content pane</h1>
      <div class="content">
        <h2>Some exciting content</h2>

        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Proin tortor purus <a href="#">platea sit eu id</a>
          nisi litora libero. Neque vulputate consequat ac amet augue
          blandit maximus aliquet congue. Pharetra vestibulum posuere
          ornare <a href="#">faucibus fusce dictumst</a> orci aenean eu
          facilisis ut volutpat commodo senectus purus himenaeos fames
          primis convallis nisi.
        </p>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/leopard.jpg"
          alt="Closeup of a large wild cat's eyes and nose" />
        <p>
          Phasellus fermentum malesuada phasellus netus dictum aenean
          placerat egestas amet. <a href="#">Ornare taciti semper dolor
          tristique</a> morbi. Sem leo tincidunt aliquet semper eu lectus
          scelerisque quis. Sagittis vivamus mollis nisi mollis enim
          fermentum laoreet.
        </p>

        <h2>More exciting content</h2>

        <p>
          Curabitur semper venenatis lectus viverra ex dictumst nulla
          maximus. Primis iaculis elementum conubia feugiat venenatis
          dolor augue ac blandit nullam ac <a href="#">phasellus turpis</a>
          feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue
          litora lectus arcu. Justo torquent pharetra volutpat ad blandit
          bibendum <a href="#">accumsan nec elit cras</a> luctus primis
          ipsum gravida class congue.
        </p>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/balloons-landscape.jpg"
          alt="Three colorful hot air balloons floating across a blue, nearly cloudless sky" />
        <p>
          Vehicula etiam elementum finibus enim duis feugiat commodo
          adipiscing tortor <a href="#">tempor elit</a>. Et mollis
          consectetur habitant turpis tortor consectetur adipiscing
          vulputate dolor lectus iaculis convallis adipiscing. Nam
          hendrerit <a href="#">dignissim condimentum ullamcorper diam</a>
          morbi eget consectetur odio in sagittis.
        </p>
      </div>
      <div class="controls">
        <button>One</button>
        <button>Two</button>
        <button>Three</button>
        <button>Four</button>
      </div>
    </section>
  </body>
</html>

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

css

/* Type and text */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: inherit;
  font: 1.2em / 1.5 system-ui;
  margin: 0 auto;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: red;
}

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

/* Styling the pane */

.pane {
  height: 100%;
}

h1,
.controls {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
}

.controls {
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
}

button {
  flex: 1;
}

保存您的文件，并在浏览器中打开 index.html 进行测试。

项目简介

按照下面的步骤完成项目，适当地调整内容面板的大小并添加所需的装饰。

标题

使用生成的内容，在顶层标题的开头显示一个书本表情符号（📖）。在表情符号和标题文本之间添加 20px 的间距。
目前，标题的大小以 em 为单位。我们希望您更改大小设置，使其具有响应性，能够根据视口宽度变化，并且仍然可以缩放。为了实现这一点，请使每个标题级别的尺寸等于视口宽度的合适百分比，再加上一个较小的 em 值。

容器尺寸

将类名为 pane 的 <section> 包装元素的宽度设置为 60%，但同时设置其最大宽度为 1000px，最小宽度为 480px。看看您是否能找到一个 CSS 函数，允许您使用单个声明来设置此项。
使用 auto 边距在页面上水平居中 pane <section>。
将 <h1> 和类名为 controls 的 <div> 的高度设置为 100px。将类名为 content 的 <div> 的高度设置为 <body> 高度的 100%，减去 <h1> 和 <div class="controls"> 的高度。这将为您提供一个始终拉伸到视口高度的 UI，其中包含一个灵活的内容容器以及固定高度的标题和按钮栏。
按钮看起来有点太细，难以阅读。将按钮的高度设置为其容器的 100%，字体大小设置为 1.2em。
为 pane <section> 和 content <div> 设置上下内边距为 0，左右内边距为 20px。

图片放置

图片目前超出了内容容器。将图片的 and 90% 上的最大宽度设置为 90%，以阻止这种情况发生。
使用 auto 边距水平居中图片。

装饰

为 pane <section> 应用一个线性渐变，从顶部的 #9fb4c7 平滑过渡到底部的 #7f7caf。
为图片设置 1px solid 边框，为 content <div> 设置 2px solid 边框。边框颜色设置为 #28587b。
为 content <div> 设置背景颜色为 #eeeeff，背景图片为 https://mdn.github.io/shared-assets/images/examples/big-star.png。背景图片不应重复，尺寸应为 40px x 40px，并距离容器顶部 5px，距离右侧 15px。
为按钮设置文本颜色为 white，背景颜色为 rgb(40 88 123 / 0.8)。当鼠标悬停或聚焦时，按钮的背景颜色应变为完全不透明的版本。
为 content <div> 和按钮设置 10px 的圆角。

溢出

此时，您应该仍然注意到 UI 中存在一个问题——content <div> 中包含的内容超出了其容器，整个页面会滚动以便您访问所有内容。我们希望 content <div> 能够滚动。您如何实现这一点？

提示和技巧

使用 W3C CSS Validator 来捕捉 CSS 中可能被忽略的意外错误，以便您进行修复。
您不需要以任何方式修改 HTML。

示例

项目初始状态将渲染如下

完成后的项目应如下所示（我们将其渲染为 90% 宽度，而不是 60%，以便在窄输出窗格中看起来更好）

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

完成后的 CSS 如下所示

css

/* Type and text */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: inherit;
  font: 1.2em / 1.5 system-ui;
  margin: 0 auto;
}

h1 {
  /* Solution: Responsive heading sizing, equal to vw value plus em value */
  font-size: calc(2vw + 1em);
}

/* Solution: Add book emoji as generated content, with 20px spacing between
it and the heading content */
h1::before {
  content: "📖";
  margin-right: 20px;
}

h2 {
  /* Solution: Responsive heading sizing, equal to vw value plus em value */
  font-size: calc(1.5vw + 0.75em);
}

a {
  color: red;
}

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

.pane {
  height: 100%;
  /* Solution: Set container width percentage and min
  and max width with one declaration, using the clamp()
  function  */
  width: clamp(480px, 60%, 1000px);
  /* Solution: Center container using auto margins */
  margin: 0 auto;
  /* Solution: Set container top/bottom padding of 0 on both sides
  and left/right padding of 20px on both sides */
  padding: 0 20px;
  /* Solution: Apply linear gradient from top to bottom */
  background: linear-gradient(to bottom, #9fb4c7, #7f7caf);
}

h1,
.controls {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Solution: Set the h1 and controls div to each be 100px high */
  height: 100px;
}

.content {
  /* Solution: Set background color and image on the content div,
  and size the image */
  background: url("https://mdn.github.io/shared-assets/images/examples/big-star.png")
    no-repeat top 5px right 15px / 40px #eeeeff;
  /* Solution: Set content top/bottom padding of 0 on both sides and
  left/right padding of 20px on both sides */
  padding: 0 20px;
  /* Solution: Set the content div to be 100% high minus the h1 and
  controls div combined height (200px) */
  height: calc(100% - 200px);
  /* Solution: Set border on the content div */
  border: 2px solid #28587b;
  /* Solution: Stop the content from overflowing its container;
  make it scroll instead */
  overflow: auto;
}

img {
  /* Solution: Set 90% maximum width on the images */
  max-width: 90%;
  /* Solution: Center using auto margins */
  margin: 0 auto;
  display: block;
  /* Solution: Set border on the images */
  border: 1px solid #28587b;
}

.controls {
  justify-content: space-around;
  gap: 20px;
  padding: 20px;
}

button {
  flex: 1;
  /* Solution: Set button height to 100% and font size to 1.2em */
  height: 100%;
  font-size: 1.2em;
  /* Solution: Set white text color on the buttons */
  color: white;
  /* Solution: Set background color on the buttons */
  background-color: rgb(40 88 123 / 0.8);
}

/* Solution: Set fully-opaque background color on the
buttons on hover and focus */
button:hover,
button:focus {
  background-color: rgb(40 88 123 / 1);
}

/* Solution: Set border radius on content div and buttons */
.content,
button {
  border-radius: 10px;
}

.pane {
  width: clamp(480px, 90%, 1000px);
}

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年10月16日⁩，由 MDN contributors 修改。

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