挑戰：修復部落格頁面樣式 - Web 開發學習

起始點

要開始，請點選下方程式碼面板中的“執行”按鈕，在 MDN Playground 中開啟提供的示例。然後，按照“專案簡介”部分中的說明適當地為頁面新增樣式。

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sizing a blog page challenge</title>
    <link href="style.css" rel="stylesheet" />
  </head>
  <body>
    <header>
      <h1>A most excellent blog</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section id="introduction" class="highlight">
        <h2>Our newest post</h2>
        <p>
          Laoreet lorem curae lectus blandit conubia vel semper laoreet congue
          at taciti.
          <a href="#">Phasellus hac consectetur iaculis dui</a> sapien iaculis
          hac ultricies per luctus. Suscipit mattis lacus semper in porta
          phasellus sollicitudin ipsum fermentum phasellus sapien. Inceptos
          etiam placerat porttitor finibus auctor at platea hendrerit aenean
          laoreet elit lorem odio.
        </p>
      </section>
      <section>
        <h2>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>
        <ul>
          <li>Lorem ipsum dolor</li>
          <li>Neque vulputate consequat</li>
          <li>Phasellus fermentum malesuada</li>
          <li>Curabitur semper venenatis</li>
          <li>Duis lectus porta mattis</li>
        </ul>
        <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>
        <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>
      </section>
      <section id="summary" class="highlight">
        <h2>Summary</h2>
        <p>
          Et arcu tortor lorem ac primis ac suspendisse lectus nulla. Habitant
          fermentum <a href="#">leo facilisis lobortis</a> risus lobortis
          maximus gravida. Euismod fames maecenas imperdiet senectus
          <a href="#">nec nisi amet pellentesque felis</a> vitae vestibulum
          integer nec tellus. Eros posuere lacinia et tellus quis fames mattis
          quisque mauris placerat rhoncus pretium sed consectetur
          <a href="#">convallis</a>.
        </p>
      </section>
    </main>
    <footer class="highlight">
      <p>©️ 2025 Nobody</p>
    </footer>
  </body>
</html>

css

/* Basic type and text */

body {
  font: 1.2em / 1.5 system-ui;
  width: clamp(480px, 70%, 1000px);
  margin: 0 auto;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: red;
}

a:hover {
  text-decoration: none;
}

/* Nav menu */

ul {
  display: flex;
  padding: 0;
  list-style-type: none;
  justify-content: space-between;
  gap: 10px;
}

li {
  flex: 1;
}

a {
  text-decoration: none;
  color: black;
  background-color: yellowgreen;
  text-align: center;
  padding: 10px;
}

a:hover {
  background-color: goldenrod;
}

/* Intro and summary */

.highlight {
  margin-top: 0;
  background-color: darkslategray;
  color: cornsilk;
}

.highlight a {
  color: purple;
}

/* Footer */

footer {
  margin-top: 20px;
  background-color: goldenrod;
  text-shadow: 1px 1px 1px black;
}

專案簡介

你收到的基本部落格示例尚未完成，現有程式碼存在一些問題。請按照以下步驟完成專案。

我們希望此頁面上的所有元素都使用替代盒模型。向樣式表中新增一條規則來實現這一點。
導航選單的規則存在一個問題——樣式基本沒問題，但它們影響了其他無序列表和內容連結，使它們看起來很糟糕！你能調整這些規則的選擇器，使其僅針對導航選單嗎？
實際上，導航選單還有另一個問題——<a> 元素沒有像預期的那樣完全跨越其 <li> 父元素。你能調整它們的顯示方式，使它們跨越整個寬度嗎？
對於導航菜單鏈接和常規內容連結，我們都會設定不同的懸停樣式，以便滑鼠使用者可以看到他們懸停的連結。這對鍵盤使用者來說存在可訪問性問題，因為他們看不到這些樣式。你能修改相關規則中的選擇器，使這些樣式也在鍵盤使用者透過 Tab 鍵聚焦到連結時應用嗎？
我們希望介紹、摘要和頁尾的四周有 20px 的內邊距。透過在樣式表中新增一條宣告來實現這一點。
新增一條規則，選擇第二個二級標題後面的每個段落的第一行，並將其設為粗體。
作為對上一個問題的延伸，能否找到一種方法來粗體顯示每個二級標題後面的段落的第一行，但僅當父元素不是介紹、摘要或頁尾時？你可以通過幾種不同的方式來實現，有些方法比其他方法更簡潔。
在下方，你會看到我們使用 .highlight a 來選擇介紹和摘要中的 <a> 元素，並在關聯的規則中將它們設為 purple 顏色。但這不好——顏色對比度太差了。假設不允許更改或刪除該規則，你能在此規則上方新增另一條規則，將 <a> 元素設為 yellow 嗎？由於它在源順序中位於上方，因此它必須具有更高的特異性。
你會看到我們在樣式表的底部試圖選擇 <footer> 元素，為其設定文字陰影、一些外邊距以將其與摘要分開，以及不同的背景顏色以使其脫穎而出。但是，由於 .highlight 規則的特異性更高，因此它宣告的樣式會覆蓋，導致它未獲得所需的邊距和背景顏色樣式。你能修改選擇器以確保這些樣式得到應用嗎？

提示和技巧

使用 W3C CSS Validator 來捕捉 CSS 中可能被忽略的意外錯誤，以便您進行修復。
您不需要以任何方式修改 HTML。

示例

完成的專案應如下所示

點選此處顯示解決方案

完成後的 CSS 如下所示

css

/* Basic type and text */

/* Solution: Set alternative box model on all elements */
* {
  box-sizing: border-box;
}

body {
  font: 1.2em / 1.5 system-ui;
  width: clamp(480px, 70%, 1000px);
  margin: 0 auto;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

a {
  color: red;
}

/* Solution: Update :hover styles to also apply on :focus
so that keyboard users can see the updated styles when
they tab to links */
a:hover,
a:focus {
  text-decoration: none;
}

/* Solution: bold ::first-line of each paragraph that appears
right after a second-level heading, but only when the parent
element is not the introduction, summary, or footer
(use :not(.highlight) to specify this second bit) */
section:not(.highlight) h2 + p::first-line {
  font-weight: bold;
}

/*

Alternative to the above solution: bold all instances first,
then remove it from those inside an element with the highlight
class afterwards

section h2 + p::first-line {
  font-weight: bold;
}

.highlight h2 + p::first-line {
  font-weight: normal;
}

*/

/* Nav menu */

/* Solution: Adjust nav rule selectors to only
target the <nav> menu */

nav ul {
  display: flex;
  padding: 0;
  list-style-type: none;
  justify-content: space-between;
  gap: 10px;
}

nav li {
  flex: 1;
}

nav a {
  text-decoration: none;
  color: black;
  background-color: yellowgreen;
  /* Solution: Set nav <a> elements to display: block so they span
  the full width of their <li> element parents */
  display: block;
  text-align: center;
  padding: 10px;
}

/* Solution: Update :hover styles to also apply on :focus
so that keyboard users can see the updated styles when
they tab to links */
nav a:hover,
nav a:focus {
  background-color: goldenrod;
}

/* Intro and summary */

.highlight {
  margin-top: 0;
  background-color: darkslategray;
  color: cornsilk;
  /* Solution: Set 20px of padding on all sides of the
  introduction, summary, and footer. They all have the
  highlight class set on them */
  padding: 20px;
}

/* Solution: Add higher specificity rule above ".highlight a"
rule to override color setting (ID selectors have a higher
specificity than class selectors) */
#introduction a,
#summary a {
  color: yellow;
}

.highlight a {
  color: purple;
}

/* Footer */

/* Solution: Increase footer rule specificity by adding ".highlight"
so that its margin-top and background-color styles are applied */
footer.highlight {
  margin-top: 20px;
  background-color: goldenrod;
  text-shadow: 1px 1px 1px black;
}

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025 年 10 月 16 日⁩，作者：MDN 貢獻者。

在 GitHub 上檢視此頁面 • 報告此內容的問題