網頁版面配置入門：5 步驟用語意化標籤與 Flexbox 做出完整版型

做網頁到了一個階段，你會開始想要「像樣」的版型：最上面有網站名稱與選單，中間是文章與側邊欄，最下面有頁尾。以前的人常常拿表格硬湊版面，現在已有更好的做法：用 HTML 的「語意化標籤」規劃區塊，再用 CSS 的 Flexbox 排列位置。

本文以「記事本」與瀏覽器為工具，延續前幾篇的 myweb 資料夾，但會另外建立 layout.html 與 layout.css 來練習，不會動到你之前做好的 index.html。用 5 個步驟，做出一個有頁首、選單、內容區、側邊欄與頁尾的完整版型。文中的圖片為示意圖，不是實際畫面。

先搞懂：網頁的區塊與語意化標籤

一般的網站，版面大多可以拆成幾個固定的區塊。HTML5 為這些區塊各準備了專用的標籤，這就是「語意化標籤」：光看標籤名稱，就知道這一塊是做什麼用的。

圖 1　網頁常見區塊與對應標籤（示意圖）

你可能會問：用 <div> 不是也能分區塊嗎？可以，但語意化標籤有三個好處：程式碼更好讀、搜尋引擎更容易理解網頁結構、視障者使用的讀屏軟體也能快速跳到想看的區塊。

步驟一：建立網頁骨架

在 myweb 資料夾新增兩個檔案：layout.html 與 layout.css（存檔類型選「所有檔案」，編碼選 UTF-8）。先在 layout.html 輸入以下內容：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的網站版面</title>
  <link rel="stylesheet" href="layout.css">
</head>
<body>

  <header>
    <h1>我的學習筆記</h1>
    <nav>
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">關於我</a></li>
      </ul>
    </nav>
  </header>

  <div class="wrapper">
    <main>
      <article>
        <h2>HTML 學習心得</h2>
        <p>今天學會了用語意化標籤規劃網頁版面，程式碼比以前整齊多了。</p>
        <p>接下來要用 Flexbox 把版面排好。</p>
      </article>
    </main>

    <aside>
      <h2>相關連結</h2>
      <ul>
        <li><a href="#">HTML 入門</a></li>
        <li><a href="#">CSS 入門</a></li>
      </ul>
    </aside>
  </div>

  <footer>
    <p>© 2026 我的學習筆記</p>
  </footer>

</body>
</html>

這裡新增了一行 <meta name="viewport" ...>，它告訴手機瀏覽器「用裝置的實際寬度顯示」，之後做手機版排版時需要它。用瀏覽器開啟 layout.html，你會看到一份沒有任何樣式、由上而下排列的純文字頁面。結構已經有了，接下來交給 CSS。

步驟二：基本樣式與頁首、頁尾

打開 layout.css，先輸入下面的內容：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Microsoft JhengHei", sans-serif;
  line-height: 1.8;
  color: #333333;
}

header {
  background-color: #1f3a5f;
  color: #ffffff;
  padding: 16px 24px;
}

footer {
  background-color: #1e293b;
  color: #cbd5e1;
  text-align: center;
  padding: 16px;
}

• *：萬用選擇器，代表「網頁上所有元素」。把預設的 margin 與 padding 先歸零，能避免不同瀏覽器的預設間距互相干擾，之後由我們自己控制。
• box-sizing: border-box：設定寬度時，連內距與框線都算在寬度之內。例如寬度設 300px、內距 20px，盒子的實際寬度還是 300px，不會莫名變成 340px，排版時省去許多計算的麻煩。

重新整理瀏覽器，頁首與頁尾已經有了顏色，但選單與內容還擠在一起，下一步就要請出 Flexbox。

步驟三：用 Flexbox 排出水平選單

Flexbox（彈性盒子）是 CSS 專門用來「一維排列」的工具：把一群元素排成一橫列，或一直欄，並輕鬆控制對齊與間距。使用方法很簡單：在「父元素」加上 display: flex，裡面的「子元素」就會自動橫向排列。

圖 2　主軸與交叉軸（示意圖）

先讓頁首的標題與選單左右分開，再把選單項目排成一橫列。在 layout.css 後面加入，並把原本的 header 規則改為如下：

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1f3a5f;
  color: #ffffff;
  padding: 16px 24px;
}

nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
}

nav a:hover {
  background-color: #2f5d9a;
}

• justify-content: space-between：沿主軸分布，把第一個項目推到最左、最後一個推到最右，中間平均分配。所以標題在左、選單在右。
• align-items: center：沿交叉軸對齊，讓項目在垂直方向置中。
• gap: 20px：項目之間的間隔。
• list-style: none：去掉清單前面的圓點。
• a:hover：滑鼠移到連結上方時的樣式。

Flexbox 常用屬性

屬性	作用	常用值
display	啟用 Flexbox（寫在父元素）	flex
flex-direction	主軸方向	row（橫）、column（直）
justify-content	主軸上的分布方式	flex-start、center、space-between、space-around
align-items	交叉軸上的對齊方式	stretch、center、flex-start
gap	項目之間的間距	20px
flex-wrap	項目太多時是否換行	nowrap、wrap
flex	子元素如何分配剩餘空間（寫在子元素）	1、0 0 240px

步驟四：做出「內容＋側邊欄」雙欄版面

現在讓 <main> 與 <aside> 並排。在 layout.css 繼續加入：

.wrapper {
  display: flex;
  gap: 24px;
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 16px;
}

main {
  flex: 1;
}

aside {
  flex: 0 0 240px;
  background-color: #f1f5f9;
  padding: 16px;
  border-radius: 8px;
}

main h2, aside h2 {
  margin-bottom: 8px;
}

main p {
  margin-bottom: 12px;
}

aside ul {
  padding-left: 20px;
}

• .wrapper：父元素，啟用 display: flex，裡面的 main 與 aside 就會左右並排。max-width 搭配 margin: 24px auto，讓整個區塊置中並限制最大寬度。
• main { flex: 1 }：主要內容占滿「剩下的所有空間」。
• aside { flex: 0 0 240px }：三個數字依序代表「不放大」「不縮小」「基本寬度 240px」，側邊欄就固定為 240 像素寬。

這是一種很實用的組合：一邊固定寬度，另一邊自動填滿，不論視窗寬窄，版面都會自動調整。

步驟五：頁尾貼底，並加入手機版排版

如果內容很少，頁尾會浮在畫面中間，下面一片空白，看起來不太好看。我們希望「內容再少，頁尾也要貼在視窗最底部」。在 layout.css 修改 body，並調整 .wrapper：

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Microsoft JhengHei", sans-serif;
  line-height: 1.8;
  color: #333333;
}

.wrapper {
  flex: 1;
  width: 100%;
  display: flex;
  gap: 24px;
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 16px;
}

• min-height: 100vh：vh 是視窗高度的百分比，100vh 就是「至少跟瀏覽器視窗一樣高」。
• flex-direction: column：讓 body 的子元素改成「由上往下」排列（主軸變成垂直方向）。
• .wrapper { flex: 1 }：中間的內容區吃掉所有剩餘的高度，頁尾自然就被擠到最底部。
• width: 100%：因為 body 改成直向排列，必須明確指定寬度，內容區才不會縮成「剛好包住文字」的大小。

最後，替手機畫面加上一小段「媒體查詢」，當視窗寬度小於 640 像素時，改成上下堆疊。在 layout.css 最後面加入：

@media (max-width: 640px) {
  header {
    flex-direction: column;
    gap: 8px;
  }

  .wrapper {
    flex-direction: column;
  }

  aside {
    flex: none;
  }
}

@media (max-width: 640px) 的意思是：「只有在視窗寬度不超過 640 像素時，才套用大括號裡的規則」。其中 aside { flex: none } 是必要的：版面改成直向後，如果還保留 flex: 0 0 240px，這 240 就會變成側邊欄的「高度」。

存檔後，用瀏覽器開啟 layout.html，慢慢把視窗拉窄，你會看到版面在 640 像素左右，從雙欄變成單欄。

圖 3　電腦版雙欄、手機版單欄的版面（示意圖）

新手常見問題

• 加了 display: flex 卻沒有效果：display: flex 要寫在「父元素」，不是你想排列的子元素本身。
• 側邊欄寬度不對、被擠扁：檢查是否寫了 flex: 0 0 240px，它的第二個數字 0 是「不縮小」。如果少了，空間不夠時側邊欄會被壓縮。
• 頁尾沒有貼底：確認 body 有設定 min-height: 100vh 與 display: flex; flex-direction: column，且內容區有 flex: 1。
• 手機版沒有效果：確認 <head> 裡有 viewport 那行 <meta>，否則手機瀏覽器會把頁面縮小成電腦版的樣子。
• 選單項目還是直的：Flexbox 要加在 <ul>（nav ul），而不是 <li> 或 <nav>。
• 想用表格排版：表格是用來呈現「資料」的，不建議拿來做版面。版面請交給語意化標籤與 Flexbox。

小練習：替自己的網站做版型

1. 把頁首的顏色、網站名稱換成自己的主題。
2. 在選單加入第 4 個項目，並試著把 justify-content 改成 center，看看效果有什麼不同。
3. 讓側邊欄改放到左邊（提示：調整 HTML 裡 main 與 aside 的順序，或使用 order 屬性）。
4. 在 <main> 裡再放兩篇 <article>，用 flex-direction: column 與 gap 控制它們之間的距離。
5. 挑戰：把前面做的課表與意見回饋單，放進這個版型的 <main> 裡，並把 JavaScript 也一起連結進來。

結語

版面配置的核心觀念是：先用語意化標籤把網頁切成有意義的區塊，再用 Flexbox 決定這些區塊怎麼排列。今天你學會了 header、nav、main、aside、footer，也學會了用 display: flex 排出水平選單、雙欄版面與貼底的頁尾，還初步接觸了媒體查詢。

下一步，可以深入學習「響應式網頁設計」，讓同一個網頁在手機、平板、電腦上都有最好的閱讀體驗。