---
# System prepended metadata

title: 基礎網頁前端學習紀錄 - 1
tags: [front - end]

---


# 📚 前端網頁開發基礎(HTML&CSS) - 學習筆記

> [!Note]
> **播放清單連結：** [點此前往](https://youtube.com/playlist?list=PL-g0fdC5RMbqW54tWQPIVbhyl_Ky6a2VI&si=R7yjmSfWzsqPtw7e)
> **學習總覽：** 雖然已經學過了基礎的HTML、CSS、Javascript用來做一個網站，但是都是依靠AI來完成，希望藉由這個播放清單來複習一下。

---

## 🚀 學習進度

- [x] **影片 1:** Visual Studio Code 開發環境簡介、安裝
- [x] **影片 2:** HTML簡介、語法基礎教學
- [x] **影片 3:** HTML常用標籤介紹
- [x] **影片 4:** CSS 簡介、語法基礎教學
- [x] **影片 5:** CSS Box Model 區塊模型
- [x] **影片 6:** CSS Selector 選擇器
- [x] **影片 7:** 網頁切版的核心觀念
- [x] **影片 8:** CSS Flexbox 網頁切版技巧
- [x] **影片 9:** RWD 回應式設計核心觀念
- [x] **影片 10:** RWD 回應式設計實務技巧

---

## 🎬 影片 1: Visual Studio Code 開發環境簡介、安裝

### 🎯 本集重點 (Key Takeaways)
- 已成功安裝 Visual Studio Code 開發環境。

### 📝 詳細筆記與心得 (Notes & Reflections)
* 主要是軟體安裝流程，跟著操作即可。

---

## 🎬 影片 2: HTML簡介、語法基礎教學

### 🎯 本集重點 (Key Takeaways)
- **重點一：** HTML 文件由**巢狀結構 (Nested)** 的**標籤 (Tag)** 組成。
- **重點二：** 標籤包含**開頭標籤**、**結尾標籤**與**內容**，並可加上**屬性 (Attribute)** 來提供額外資訊。
- **重點三：** 部分標籤為**空元素 (Empty Element)**，沒有內容，可以自我閉合。

### 📝 詳細筆記與心得 (Notes & Reflections)
- **HTML 的基本結構**
    * **巢狀結構 (Nesting)**：標籤可以一層層地包覆組合，形成頁面架構。
    * **基本語法**：
        * **開頭標籤 (Opening Tag)**：例如 `<html>`、`<body>`
        * **結束標籤 (Closing Tag)**：例如 `</html>`、`</body>`
        * **內容 (Content)**：位於開頭與結束標籤之間的資訊。
            * 內容可以是純文字：`<body>這是內文</body>`
            * 內容也可以是其他的 HTML 標籤：`<head><title>這是標題</title></head>`

- **標籤屬性 (Attributes)**
    * **語法**：`屬性名稱="屬性值"`，定義在**開頭標籤**內。
    * 一個標籤可以有多個屬性，以空白隔開。
    * **範例**：
        ```html
        <a href="[http://google.com/](http://google.com/)">Google</a>

        <div id="title" class="head">Title</div>
        ```

- **常用與特殊標籤**
    * **文字格式化**：`<b>` 標籤可以讓裡面的文字變成**粗體** `</b>`。
    * **空元素 (Empty Elements)**：
        * 有些標籤天生沒有內容，例如 `<img>` (圖片)、`<hr>` (水平線)。
        * 這些標籤不需要結束標籤，可直接寫成 `<img />` 或 `<hr />` 的形式自我閉合（在 HTML5 中，結尾的斜線 `/` 是選用的）。
        * 舊的寫法 `<img></img>` 現在已不推薦。

- **註解 (Comments)**
    * 瀏覽器會忽略註解，主要用於開發者筆記或暫時隱藏程式碼。
    * **語法**：
        ```html
            <!-- 這是註解>
            <!-- 
                這也是註解
            -->
        ```

- **基礎網頁結構**
    以下在VS code中打出!在案tab可以生出預設的一些架構
    ```html
        <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8"/>
                <title>網頁標題</title>
            </head>
            <body>
                這是網頁主畫面中的內容
            </body>
        </html>
    ```
    
---

## 🎬 影片 3: HTML常用標籤介紹

### 🎯 本集重點 (Key Takeaways)
* **重點一：** 使用標題標籤 `<h1>` 至 `<h6>` 來建立內容的層級與架構。
* **重點二：** 使用 `<a>` 標籤與 `href` 屬性來建立超連結，實現頁面跳轉。
* **重點三：** 使用 `<img>` 標籤與 `src` 屬性來嵌入圖片。
* **重點四：** 使用 `<ul>` (無序) 和 `<ol>` (有序) 列表來組織項目。
* **重點五：** 使用 `<table>`, `<tr>`, `<th>`, `<td>` 來建立和組織表格資料。

### 📝 詳細筆記與心得 (Notes & Reflections)

* **標題標籤群 (Headings)**
    * HTML 提供 `<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`、`<h6>` 共六級標題。
    * `<h1>` 通常用於最重要的主標題，`<h6>` 用於最次要的標題，依此類推。
    * **範例：**
        ```html
        <h1>這是文章主標題</h1>
        <h3>這是段落標題</h3>
        ```

* **超連結 (Anchor)**
    * 使用 `<a>` 標籤，並搭配 `href` (Hypertext Reference) 屬性來指定目標網址。
    * **範例：** 建立一個連到 Google 的連結。
        ```html
        <a href="[https://google.com/](https://google.com/)">點我前往 Google</a>
        ```

* **圖片 (Image)**
    * 使用 `<img>` 標籤，並搭配 `src` (Source) 屬性來指定圖片的來源位址。
    * `<img>` 是個空元素，常見的寫法是自我閉合：`<img src="image.png" />` 或直接 `<img src="image.png">`。
    * **範例：**
        ```html
        <img src="檔案位址" alt="圖片的描述文字" />
        ```
    > [!TIP]
    > 養成加入 `alt` 屬性的好習慣！它能提供圖片的替代文字，在圖片無法顯示時或對螢幕閱讀器很有用。

* **列表 (Lists)**
    * `<ul>` (Unordered List) 會產生項目符號（圓點）列表。
    * `<ol>` (Ordered List) 會產生有序號（數字）的列表。
    * `<li>` (List Item) 代表列表中的每一個項目。

    <div style="display: flex; align-items: center; gap: 20px;">
    <div style="flex: 1;">

    ```html
    <ul>
        <li>Google</li>
        <li>Facebook</li>
    </ul>

    <ol>
        <li>Google</li>
        <li>Facebook</li>
    </ol>
    ```

    </div>
    <div style="flex: 1;">

    ![](https://hackmd.io/_uploads/S1v5smOSll.png)

    </div>
    </div>

* **表格 (Table)**
    * 使用 `<table>` (定義表格)、`<tr>` (定義列)、`<td>` (定義資料儲存格) 來組合。
    * **範例：** 建立一個 3x2 的表格。
        ```html
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </table>
        ```
    :::spoiler 成果展示
    <table>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
        </table>
    :::

* **綜合練習**
    * 這是一個包含標題、連結、圖片、列表和表格的完整 HTML 頁面範例。
    > [!Note]
    > 注意在下方的 MLB 戰績表中，標題列使用了 `<th>` (Table Header)，因此它會有預設的粗體置中和背景樣式。 另外，`border`, `width`, `cellpadding` 等屬性在現代網頁開發中，更推薦使用 CSS 來設定樣式。

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>我的首頁</title>
    </head>
    <body>
        <h2>我的個人資訊</h2>
        <a href="[http://training.pada-x.com](http://training.pada-x.com)">我的教學平台</a>
        <img src="warmpc.png" alt="電腦圖片" />
        <hr/>
        
        <h2>我的最愛</h2>
        <ul>
            <li><a href="[https://www.google.com/](https://www.google.com/)">Google</a></li>
            <li>Facebook</li>
        </ul>

        <h2>MLB 戰績表</h2>
        <table border="1" width="350" cellpadding="10">
            <tr>
                <th>球隊</th>
                <th>勝</th>
                <th>敗</th>
            </tr>
            <tr>
                <td>紅襪</td>
                <td>90</td>
                <td>72</td>
            </tr>
            <tr>
                <td>洋基</td>
                <td>92</td>
                <td>70</td>
            </tr>
            <tr>
                <td>藍鳥</td>
                <td>89</td>
                <td>73</td>
            </tr>
        </table>
    </body>
    </html>
    ```
    
    :::spoiler 成果展示
    ![image](https://hackmd.io/_uploads/Hyqx4EdHxe.png)
    :::
    
---

## 🎬 影片 4: CSS 簡介、語法基礎教學

### 🎯 本集重點 (Key Takeaways)
* **重點一：** CSS (Cascading Style Sheets) 用於美化網頁、設定排版與樣式，實現**內容 (HTML) 與樣式 (CSS) 的分離**。
* **重點二：** CSS 的基本語法為 `屬性: 值;` (e.g., `color: red;`)，多個樣式之間用分號隔開。
* **重點三：** 「行內樣式 (Inline Style)」是將 CSS 直接寫在 HTML 標籤的 `style` 屬性中。
* **重點四：** HTML 標籤分為**區塊模式 (block)** 與**行內模式 (inline)**，這決定了它們在頁面上的預設排版行為。

### 📝 詳細筆記與心得 (Notes & Reflections)

* **1. 什麼是 CSS？**
    * HTML 與 CSS 是網頁開發的核心。
        * **HTML (結構層)**：負責網頁的內容與主要架構，像房子的鋼筋水泥。
        * **CSS (樣式層)**：負責處理排版、顏色、字體等外觀樣式，像房子的裝潢設計。

* **2. 如何使用 CSS？(行內樣式 Inline Style)**
    * 這是在特定 HTML 標籤上直接使用 `style` 屬性來加入 CSS 樣式。
    * **語法：**
        ```html
        <標籤名稱 style="屬性1: 值1; 屬性2: 值2;">...</標籤名稱>
        ```
    * **範例：**
        ```html
        <h3 style="color: red;">這是一個紅色標題</h3>

        <div style="font-weight: bold; color: blue;">這是一段粗體的藍色文字。</div>
        ```

* **3. 常用 CSS 屬性**
    * **文字粗細 `font-weight`**
        * `font-weight: bold;` (粗體)
        * `font-weight: normal;` (正常)
    * **文字大小 `font-size`**
        * `font-size: 16px;` (pixel, 像素，絕對單位)
        * `font-size: 2em;` (em, 相對單位，2em 代表父層文字大小的兩倍)
    * **文字顏色 `color`**
        * `color: red;` (顏色名稱)
        * `color: #0000ff;` (十六進位色碼)
    * **文字裝飾 `text-decoration`**
        * `text-decoration: underline;` (底線)
        * `text-decoration: line-through;` (刪除線)
    * **文字水平對齊 `text-align`**
        * `text-align: left;` (靠左)
        * `text-align: center;` (置中)
        * `text-align: right;` (靠右)

* **4. 乾淨的標籤與顯示模式 (Display Mode)**
    * **乾淨標籤 (Generic Containers)**
        * 為了方便自由地套用 CSS 樣式，我們常使用沒有預設樣式的「乾淨」標籤。
        * `<h3>`：本身帶有**粗體**、**放大**等預設樣式。
        * `<div>`, `<span>`：本身**沒有任何預設樣式**，像一張白紙，適合用來組織內容與套用樣式。
    
    * **顯示模式**
        * **區塊模式 (block)**
            * **特性：** 會自動換行，且寬度預設會佔滿父層的整行。
            * **代表標籤：** `<div>`、`<h1>`~`<h6>`、`<p>`、`<ul>`、`<table>`
        * **行內模式 (inline)**
            * **特性：** 不會自動換行，多個行內元素會排在同一行，寬高由其內容決定。
            * **代表標籤：** `<span>`、`<a>`、`<img>`
        * **隱藏模式 (none)**
            * 可透過 CSS `display: none;` 屬性將任何元素隱藏起來，不顯示也不佔據空間。

* **5. 綜合練習**
    > [!TIP]
    > 下方的練習很好地展示了 `<div>` (區塊) 和 `<span>` (行內) 的差別。請特別觀察「天氣」這個詞在兩種寫法下的換行表現。

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS 的基本練習</title>
    </head>
    <body style="background-color: #cccccc;">
        <h3 style="color: red;">文章第一段落的標題</h3>
        
        <div style="font-weight: bold; font-size: 24px;">文章第一段落的內容</div>

        <div style="color: #666666;">
            今天的<div style="color: red;">天氣</div>真是不錯
        </div>

        <div style="color: #666666;">
            今天的<span style="color: red;">天氣</span>真是不錯
        </div>
    </body>
    </html>
    ```
    :::spoiler 成果展示
    ![image](https://hackmd.io/_uploads/Hysi34_Blg.png)
    :::

---

## 🎬 影片 5: CSS Box Model 區塊模型

### 🎯 本集重點 (Key Takeaways)
* **重點一：** 網頁上的每個元素都可以看作一個矩形的「盒子(Box)」。
* **重點二：** Box Model 由四個部分組成，由內到外分別是：**Content (內容)**、**Padding (內距)**、**Border (邊框)**、**Margin (外距)**。
* **重點三：** `padding` 是內容與邊框之間的距離 (盒子內部空間)；`margin` 是邊框以外的距離 (盒子與其他元素之間的間隔)。
* **重點四：** `width` 和 `height` 預設是設定 **Content (內容)** 區域的寬高。

### 📝 詳細筆記與心得 (Notes & Reflections)

* **1. 認識 Box Model**
    * 這是 CSS 排版的核心基礎。想像一下每個 HTML 元素都被裝在一個個透明的盒子裡，Box Model 就是用來定義這個盒子大小與間距的規則。
    * **盒子的結構 (由內到外):**
        > **Margin (外距)**
        > > **Border (邊框)**
        > > > **Padding (內距)**
        > > > > **Content (內容)**

* **2. Box Model 的組成部分**

    * **Content (內容)**
        * 盒子最內層，用來顯示文字、圖片等實際內容。
        * 可以用 `width` 和 `height` 屬性來設定內容區域的尺寸。
        * **`width` (寬度)**: 預設是父標籤的100%。可設為 `500px` (絕對值) 或 `50%` (相對值)。
        * **`height` (高度)**: 預設是隨內容自動縮放。
        * `width` 和 `height` 屬性主要對**區塊模式 (block)** 元素生效。

    * **Padding (內距 / 填塞)**
        * 內容與邊框之間的空間，像在盒子裡塞棉花。會**撐大盒子**的視覺大小。
        * `background-color` 會填滿這個區域。
        * **語法：**
            ```css
            /* 四邊內距皆為 10px */
            padding: 10px;

            /* 只設定上方內距 */
            padding-top: 10px;

            /* 其他方向：padding-right, padding-bottom, padding-left */
            ```
        * **範例比較：**
            <div style="display: flex; gap: 10px; align-items: stretch;">
            <div style="flex:1; text-align: center;"><b>padding: 1px</b><div style="border: 1px solid;background-color: #cccccc; padding: 1px; height: 100%;">Hello</div></div>
            <div style="flex:1; text-align: center;"><b>padding: 10px</b><div style="border: 1px solid;background-color: #cccccc; padding: 10px; height: 100%;">Hello</div></div>
            </div>

    * **Border (邊框)**
        * 包圍在 Padding 外圍的線條，就是盒子的邊界。
        * **語法 (簡寫)**: `border: 寬度 樣式 顏色;`
            ```css
            /* 5px 寬的紅色實線邊框 */
            border: 5px solid red;

            /* 2px 寬的藍色虛線邊框 */
            border: 2px dashed blue;

            /* 沒有邊框 (預設) */
            border: 0px;
            ```
        * **範例比較：**
            <div style="display: flex; gap: 10px; align-items: stretch;">
            <div style="flex:1; text-align: center;"><b>5px solid red</b><div style="border: 5px solid red;background-color: #cccccc; padding: 10px; height: 100%;">Hello</div></div>
            <div style="flex:1; text-align: center;"><b>2px dashed blue</b><div style="border: 2px dashed blue;background-color: #cccccc; padding: 10px; height: 100%;">Hello</div></div>
            </div>

    * **Margin (外距 / 邊界)**
        * 邊框以外的空間，完全透明，用來推開其他元素，製造間距。
        * **語法：**
            ```css
            /* 四邊外距皆為 10px */
            margin: 10px;

            /* 只設定下方外距 */
            margin-bottom: 10px;

            /* 其他方向：margin-top, margin-right, margin-left */
            ```
        * **範例：** 讓第一個區塊與第二個區塊之間產生 `10px` 的距離。
            ```html
            <div style="margin-bottom: 10px;">Line 1</div>
            <div>Line 2</div>
            ```
            **顯示結果：**
            <div style="border: 1px solid;background-color: #cccccc;padding: 5px;margin-bottom: 10px">Line 1</div>
            <div style="border: 1px solid;background-color: #cccccc;padding: 5px;">Line 2</div>

    * **背景顏色 `background-color`**
        * 背景顏色會填滿 **Content** 和 **Padding** 區域，但**不會**延伸到 Margin。
        * **範例 1：**
            ```html
            <div style="padding: 10px; background-color: #00A6CB;">Hello</div>
            ```
            <div style="border: 1px solid;background-color: #00A6CB; padding: 10px;">Hello</div>
        
        * **範例 2：**
            ```html
            <div>
                這是
                <span style="background-color:red">隻筆</span>
            </div>
            ```
    
            <div style="width: 100%;border: 1px solid;background-color: #cccccc; padding: 10px;">
            這是
            <span style="background-color:red">隻筆</span>
            </div>

* **3. 綜合練習**
    * 這個範例展示了如何運用 Box Model 的各種屬性來排版。

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Box Model 的綜合練習</title>
    </head>
    <body style="background-color:#cccccc">
        <div style="margin-top: 10px; margin-bottom: 10px; font-weight: bold; font-size: 24px;">
            文章第一段落的標題
        </div>

        <div style="width: 400px; padding: 10px; border: 1px dashed blue; color: #666666; margin-top: 10px;">
            今天的<span style="color:red">天氣</span>真是不錯
            <div style="background-color: yellow;">測試</div>
            <br/>更多行<br/>更多行<br/>更多行
        </div>
        
        <div style="height: 70px; width: 400px; padding: 10px; border: 1px dashed blue; color: #666666; margin-top: 10px;">
            今天的<span style="color:red">天氣</span>真是不錯
            <div style="background-color: yellow;">測試</div>
            <br/>更多行<br/>更多行<br/>更多行
        </div>
    </body>
    </html>
    ```

    :::spoiler 結果展示
    ![image](https://hackmd.io/_uploads/r1b-Pwdrel.png)
    :::
    
---

## 🎬 影片 6: CSS Selector 選擇器

### 🎯 本集重點 (Key Takeaways)
* **重點一：** 選擇器 (Selector) 是 CSS 的核心，它能精準地「選中」想套用樣式的 HTML 元素。
* **重點二：** 透過將 CSS 寫在 `<style>` 區塊或獨立的 `.css` 檔案中，可以達成**樣式與內容分離**，讓程式碼更乾淨、易於管理。
* **重點三：** 最基礎的三種選擇器是：**標籤選擇器** (如 `div`)、**Class 選擇器** (如 `.title`)、**ID 選擇器** (如 `#header`)。
* **重點四：** **Class 可重複使用**，一個頁面能有多個相同的 class；**ID 必須是唯一的**，一個頁面中同一個 ID 只能出現一次。

### 📝 詳細筆記與心得 (Notes & Reflections)

* **1. 為什麼需要選擇器？**
    * **集中管理**：取代將樣式一一寫在 `style` 屬性中的作法，改為集中在 `<style>` 區塊或外部檔案中統一管理。
    * **重複利用**：可以將一個設計好的樣式（例如：按鈕樣式）應用到多個不同的標籤上。
    * **程式碼分離**：讓 HTML 專注於內容結構，CSS 專注於外觀樣式，大幅提升可維護性。

    ---

    * **Before (行內樣式 Inline Style):** 樣式與 HTML 混雜在一起。
        ```html
        <body>
            <div style="color:red">紅色字</div>
            <div style="font-weight:bold">粗體字</div>
        </body>
        ```
    * **After (使用選擇器與內部樣式表):** HTML 結構變得乾淨。
        ```html
        <head>
            <style>
                /* 樣式規則會寫在這裡，透過選擇器與 HTML 連結 */
                .red-text { color: red; }
                .bold-text { font-weight: bold; }
            </style>
        </head>
        <body>
            <div class="red-text">紅色字</div>
            <div class="bold-text">粗體字</div>
        </body>
        ```
    ---

* **2. 基礎選擇器詳解**
    * **標籤選擇器 (Tag Selector)**
        * 直接使用 HTML 標籤名稱作為選擇器，會選中頁面上**所有**該種類的標籤。
        * **範例：**
            ```css
            /* 選中頁面上所有的 <body> 和 <div> 標籤 */
            body { background-color: #cccccc; }
            div { margin: 10px; }
            ```

    * **Class 選擇器 (Class Selector)**
        * 最常用、最有彈性的選擇器。以 `.` 符號開頭，名稱自訂。
        * **可以重複使用**，一個 class 名稱可以被多個標籤套用。
        * **範例：**
            ```css
            /* 定義兩個 class 樣式 */
            .style-red { color: red; }
            .style-bold { font-weight: bold; }
            ```
            ```html
            <div class="style-red">紅色字</div>
            <div class="style-bold">粗體字</div>
            <p class="style-red">這也是紅色字</p>
            ```

    * **ID 選擇器 (ID Selector)**
        * 用來選中頁面上**獨一無二**的特定元素。以 `#` 符號開頭，名稱自訂。
        * **ID 在整個 HTML 頁面中必須是唯一的**，不能重複。通常用於標示頁面主要區塊，如頁首、頁尾。
        * **範例：**
            ```css
            /* 定義一個 ID 樣式 */
            #main-title {
                margin: 10px;
                font-size: 20px;
            }
            ```
            ```html
            <div id="main-title">這是獨一無二的主標題</div>
            ```

* **3. 引入外部 CSS 檔案 (External CSS)**
    * 這是最推薦的作法。將所有 CSS 樣式寫在一個獨立的 `.css` 檔案中，再透過 `<link>` 標籤引入 HTML。
    * **語法：**
        ```html
        <head>
            <link rel="stylesheet" type="text/css" href="你的樣式檔案.css" />
        </head>
        ```

* **4. 綜合練習**
    * **情境：** 我們要將上一個單元的練習，從行內樣式(Inline)改寫成使用選擇器(Internal/External)的方式。
    > [!NOTE]
    > 我已將您練習程式碼中，`<body>` 標籤內多餘的 `style` 屬性移除，這樣才能真正體現由 CSS 選擇器來控制樣式的效果。

    * **作法一：使用內部樣式表 (Internal CSS)**
        * 將所有 CSS 寫在 HTML 頭部的 `<style>` 區塊中。
        ```html
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>CSS 選擇器練習 (內部)</title>
            <style>
                /* 標籤選擇器 */
                body { background-color: #cccccc; }

                /* ID 選擇器 */
                #title-1 { text-decoration: line-through; }

                /* Class 選擇器 */
                .title {
                    margin-top: 10px;
                    margin-bottom: 10px;
                    font-weight: bold;
                    font-size: 24px;
                }
                .content {
                    width: 400px;
                    padding: 10px;
                    border: 1px dashed blue;
                    color: #666666;
                }
                .keyword { color: red; }
            </style>
        </head>
        <body>
            <div id="title-1" class="title">文章第一段落的標題</div>
            <div class="content">
                今天的<span class="keyword">天氣</span>真是不錯
            </div>
            <div class="title">文章第二段落的標題</div>
            <div class="content">
                今天的<span class="keyword">天氣</span>真是不錯
            </div>
        </body>
        </html>
        ```

    * **作法二：使用外部樣式表 (External CSS) - 推薦**
        * **HTML (`index.html`)** 變得非常乾淨，只負責引入 CSS 檔案。
        ```html
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>CSS 選擇器練習 (外部)</title>
            <link rel="stylesheet" href="style.css">
        </head>
        <body>
            <div id="title-1" class="title">文章第一段落的標題</div>
            <div class="content">
                今天的<span class="keyword">天氣</span>真是不錯
            </div>
            <div class="title">文章第二段落的標題</div>
            <div class="content">
                今天的<span class="keyword">天氣</span>真是不錯
            </div>
        </body>
        </html>
        ```
        * **CSS (`style.css`)** 檔案內容。
        ```css
        /* 標籤選擇器 */
        body {
            background-color: #cccccc;
        }

        /* ID 選擇器 */
        #title-1 {
            text-decoration: line-through;
        }

        /* Class 選擇器 */
        .title {
            margin-top: 10px;
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 24px;
        }
        .content {
            width: 400px;
            padding: 10px;
            border: 1px dashed blue;
            color: #666666;
        }
        .keyword {
            color: red;
        }
        ```

    :::spoiler 結果展示 (兩種作法結果相同)
    ![image](https://hackmd.io/_uploads/ByKYPjFHgx.png)
    :::
    
---

## 🎬 影片 7: 網頁切版的核心觀念

### 🎯 本集重點 (Key Takeaways)
* **重點一：巢狀容器 (Nested Containers)**
    * 網頁排版就像俄羅斯娃娃，由一層層的盒子（容器）堆疊而成。透過將 `<div>` 互相嵌套，建立出清晰的父子層級關係，是切版的基礎。
* **重點二：CSS Flexbox 是排版利器**
    * 在容器上設定 `display: flex;`，就能啟用強大的 Flexbox 排版模式，輕鬆控制其「子項目」的對齊、間距與尺寸。
* **重點三：關注父層容器**
    * 大部分的 Flexbox 屬性，如 `gap`, `flex-direction`, `justify-content`, `align-items`，都是設定在**父容器**上，用來管理**子項目**的排列方式。
* **重點四：子項目也能控制自己**
    * 部分屬性如 `flex` (空間分配比例) 或 `flex-grow` / `flex-shrink`，則是設定在**子項目**上，用來決定自己在父容器中的行為。

### 📝 詳細筆記與心得 (Notes & Reflections)

* **1. 核心觀念：巢狀容器**
    * 整個版面由大大小小的容器所組成，理解它們之間的層級關係至關重要：
        * 最外層的灰色區塊 (`.container`) 是所有內容的**容器**。
        * 上半部 (`.top-section`) 與下半部 (`.bottom-section`) 是灰色區塊內的**項目**。
        * 每個藍色區塊 (`.blue-box`) 既是上一層的**項目**，同時也是其內部黃色或綠色項目的**容器**。

* **2. 實戰範例：版面拆解**
    * 以下是我們透過 HTML 與 CSS 打造的版面。

    <div style="background-color: #F0F0F0; border: 1px solid #dee2e6; padding: 16px; border-radius: 8px; font-family: sans-serif;">
      <div style="display: flex; gap: 16px;">
        <div style="background-color: #cfe2ff; border: 2px solid #9ec5fe; border-radius: 6px; padding: 16px; display: flex; gap: 12px; flex: 2; flex-direction: column;">
          <div style="background-color: #fff3cd; border: 1.5px solid #ffe69c; height: 40px; border-radius: 4px; flex-grow:1;"></div>
          <div style="background-color: #fff3cd; border: 1.5px solid #ffe69c; height: 40px; border-radius: 4px; flex-grow:1;"></div>
        </div>
        <div style="background-color: #cfe2ff; border: 2px solid #9ec5fe; border-radius: 6px; padding: 16px; display: flex; gap: 12px; flex: 3; align-items: center; justify-content: space-around;">
          <div style="background-color: #a3cfbb; border: 1.5px solid green; border-radius: 4px; width: 64px; height: 64px; flex-shrink: 0;"></div>
          <div style="background-color: #a3cfbb; border: 1.5px solid green; border-radius: 4px; width: 64px; height: 64px; flex-shrink: 0;"></div>
          <div style="background-color: #a3cfbb; border: 1.5px solid green; border-radius: 4px; width: 64px; height: 64px; flex-shrink: 0;"></div>
        </div>
      </div>
      <div style="border-top: 2px solid #dee2e6; margin-top: 16px; padding-top: 16px;">
        <div style="background-color: #cfe2ff; border: 2px solid #9ec5fe; border-radius: 6px; padding: 16px; display: flex; gap: 12px; align-items: center;">
          <div style="background-color: #a3cfbb; border: 1.5px solid green; border-radius: 4px; height: 64px; flex-grow: 1;"></div>
          <div style="background-color: #a3cfbb; border: 1.5px solid green; border-radius: 4px; width: 64px; height: 64px; flex-shrink: 0;"></div>
          <div style="background-color: #a3cfbb; border: 1.5px solid green; border-radius: 4px; width: 64px; height: 64px; flex-shrink: 0;"></div>
        </div>
      </div>
    </div>

* **3. 程式碼詳解**
    > [!TIP]
    > 下方是上面範例的完整程式碼。我在 CSS 中加入了詳細的註解，說明每個關鍵屬性的作用。

    :::spoiler 程式碼
    ```html
    <!DOCTYPE html>
    <html>
    <head>
    <style>
      /* 整個版面的最外層容器 */
      .container {
        background-color: #F0F0F0; /* 淡灰色背景 */
        border: 1px solid #dee2e6;
        padding: 16px;
        border-radius: 8px;
        font-family: sans-serif;
      }

      /* 上半部容器，用來裝左右兩個藍色區塊 */
      .top-section {
        display: flex; /* 啟用 Flexbox，讓內部項目(藍色區塊)可以水平排列 */
        gap: 16px;     /* 設定左右兩個藍色區塊之間的間距 */
      }

      /* 下半部容器 */
      .bottom-section {
        border-top: 2px solid #dee2e6; /* 分隔上下區塊的線條 */
        margin-top: 16px;
        padding-top: 16px;
      }

      /* 藍色區塊的通用樣式 */
      .blue-box {
        background-color: #cfe2ff;
        border: 2px solid #9ec5fe;
        border-radius: 6px;
        padding: 16px;
        display: flex; /* 藍色區塊自己也是 Flex 容器，用來管理內部的黃/綠項目 */
        gap: 12px;     /* 藍色區塊內部項目的間距 */
      }

      /* 左上角的藍色區塊 */
      .top-left-box {
        flex: 2; /* 在 top-section 中，佔用空間的比例為 2 */
        flex-direction: column; /* 讓內部的黃色項目「垂直」排列 */
      }

      /* 右上角的藍色區塊 */
      .top-right-box {
        flex: 3; /* 在 top-section 中，佔用空間的比例為 3 */
        align-items: center; /* 讓內部的綠色項目垂直置中 */
        justify-content: space-around; /* 讓內部的綠色項目水平均勻分布空間 */
      }
      
      /* 下方的大藍色區塊 */
      .bottom-box {
          align-items: center; /* 讓所有綠色項目垂直置中對齊 */
      }
      
      /* 黃色項目的樣式 */
      .yellow-item {
        background-color: #fff3cd;
        border: 1.5px solid #ffe69c;
        height: 40px;
        border-radius: 4px;
        flex-grow: 1; /* 在 top-left-box 中，讓黃色項目自動填滿所有可用的「垂直」空間 */
      }
      
      /* 綠色項目的通用樣式 */
      .green-item {
        background-color: #a3cfbb;
        border: 1.5px solid green;
        border-radius: 4px;
      }

      /* 綠色方塊 */
      .green-square {
        width: 64px;
        height: 64px;
        flex-shrink: 0; /* 防止方塊在空間不足時被壓縮變形 */
      }

      /* 下方的長條形綠色項目 */
      .green-long {
        height: 64px;
        flex-grow: 1; /* 在 bottom-box 中，佔滿所有剩餘的「水平」空間 */
      }
    </style>
    </head>
    <body>

    <div class="container">
      <div class="top-section">
        <div class="blue-box top-left-box">
          <div class="yellow-item"></div>
          <div class="yellow-item"></div>
        </div>
        <div class="blue-box top-right-box">
          <div class="green-item green-square"></div>
          <div class="green-item green-square"></div>
          <div class="green-item green-square"></div>
        </div>
      </div>
      <div class="bottom-section">
        <div class="blue-box bottom-box">
          <div class="green-item green-long"></div>
          <div class="green-item green-square"></div>
          <div class="green-item green-square"></div>
        </div>
      </div>
    </div>

    </body>
    </html>
    ```
    :::
    
---

## 🎬 影片 8: CSS Flexbox 網頁切版技巧

### 🎯 本集重點 (Key Takeaways)
* **重點一：`display: flex;`**
    * 這是啟用 Flexbox 的開關。一旦在父容器上設定，其直屬子項目就會從預設的垂直排列（block）轉為水平並排。
* **重點二：`flex` 屬性控制寬度**
    * 子項目的 `flex` 屬性是控制寬度配置的關鍵。`flex: 1` 或 `flex: auto` 可以讓項目彈性填滿剩餘空間；`flex: none` 則讓項目維持其原始尺寸。
* **重點三：`justify-content` 控制水平對齊**
    * 在父容器上設定，用來決定子項目在「水平方向」的對齊方式，例如 `center` (置中)、`flex-end` (靠右)、`space-between` (平均分散) 等。
* **重點四：`align-items` 控制垂直對齊**
    * 在父容器上設定，用來決定子項目在「垂直方向」的對齊方式，例如 `center` (置中)、`flex-end` (靠下)。
* **重點五：完美置中**
    * 在父容器上同時設定 `justify-content: center;` 和 `align-items: center;`，即可輕鬆實現內容的水平垂直置中，是 Flexbox 最方便的應用之一。

### 📝 詳細筆記與心得 (Notes & Reflections)

- **將容器中的項目並排**

    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center;">display:block</div>
        <div style="display: block;padding: 10px; border-radius: 3px;">
            <div style="height: 30px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue;"></div>
            <div style="height: 30px; background-color: #a3c9e0; margin-top:10px; border-radius: 3px;border:1px solid blue"></div>
        </div>
    </div>
    
    :::spoiler 程式碼
    ```html
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center;">display:block</div>
        <div style="display: block;padding: 10px; border-radius: 3px;">
            <div style="height: 30px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue;"></div>
            <div style="height: 30px; background-color: #a3c9e0; margin-top:10px; border-radius: 3px;border:1px solid blue"></div>
        </div>
    </div>
    ```
    :::
    
    <div style="text-align:center; font-size: 28px; margin: 15px 0;">⬇️</div> 
    
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center; color:red;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;">
            <div style="width: 50%; height: 30px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue"></div>
            <div style="width: 50%; height: 30px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue"></div>
        </div>
    </div>
    
    :::spoiler　程式碼 
    ```html
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center; color:red;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;">
            <div style="width: 50%; height: 30px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue"></div>
            <div style="width: 50%; height: 30px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue"></div>
        </div>
    </div>
    ```
    :::
    
- **決定項目的寬度配置**
    
    - 固定寬度，各50%的配置
        
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content: center;">
            <div style="width: 50%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><span style="color:red">flex:none;</span></br><span>width:50%</span></div>
            <div style="width: 50%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><span style="color:red">flex:none;</span></br><span>width:50%</span></div>
        </div>
    </div>
    
    :::spoiler 程式碼
    ```html
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content: center;">
            <div style="width: 50%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><span style="color:red">flex:none;</span></br><span>width:50%</span></div>
            <div style="width: 50%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><span style="color:red">flex:none;</span></br><span>width:50%</span></div>
        </div>
    </div>
    ```
    :::
    
    - 左邊固定100px，右邊彈性縮放配置
    
    <div style="background-color:#f0f0f0; border-radius: 3px;border:1px solid">
        <div style="text-align:center;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;">
            <div style="width: 100px; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><span style="color:red">flex:none;</span><br/>width:100px</div>
            <div style="flex:auto; display:flex; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; justify-content:center; align-items:center;"><span style="color:red">flex:auto;</span></div>
        </div>
    </div>

    :::spoiler 程式碼
    ```html
    <div style="background-color:#f0f0f0; border-radius: 3px;border:1px solid">
        <div style="text-align:center;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;">
            <div style="width: 100px; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><span style="color:red">flex:none;</span><br/>width:100px</div>
            <div style="flex:auto; display:flex; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; justify-content:center; align-items:center;"><span style="color:red">flex:auto;</span></div>
        </div>
    </div>
    ```
    :::
    
- **多層次的結構**
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content: center;">
            <div style="display:flex; width: 50%; height: 50px; background-color: #a3c9e0; border-radius: 3px; justify-content:center; align-items:center; border: 1px solid blue">flex:設定</div>
            <div style="display:flex; width: 50%; height: 50px; background-color: #a3c9e0; border-radius: 3px; justify-content:center; align-items:center; border: 1px solid blue">flex:設定</div>
        </div>
    </div>
    
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center; color:red;">display:flex</div>
        <div style="padding: 10px; border-radius: 3px;text-align:center;">
            <div style="height:90px; background-color:#a3c9e0; justify-content:center; align-items:center; color:red; border: 1px solid blue; border-radius: 3px">
                <div>flex:設定<span style="color:orange">display:flex</span></div>
                <div style="display:flex; gap: 10px; ">
                    <div style="display:flex; width:50%; height: 50px; background-color:palegreen; justify-content:center; align-items:center; margin-left:10px; border: 1px solid green; border-radius:3px;">
                        <span style="color:orange;">flex:設定</span>
                    </div>
                    <div style="display:flex; flex: none; width:30%; height: 50px; background-color:palegreen; justify-content:center; align-items:center; border: 1px solid green; border-radius:3px;">
                        <span style="color:orange;">flex:設定</span>
                    </div>
                    <div style="display:flex; flex:auto; height: 50px; background-color:palegreen; justify-content:center; align-items:center; margin-right:10px; border: 1px solid green; border-radius:3px;">
                        <span style="color:orange;">...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    :::spoiler 程式碼
    ```html
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center;">display:flex</div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content: center;">
            <div style="display:flex; width: 50%; height: 50px; background-color: #a3c9e0; border-radius: 3px; justify-content:center; align-items:center; border: 1px solid blue">flex:設定</div>
            <div style="display:flex; width: 50%; height: 50px; background-color: #a3c9e0; border-radius: 3px; justify-content:center; align-items:center; border: 1px solid blue">flex:設定</div>
        </div>
    </div>
    
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
        <div style="text-align:center; color:red;">display:flex</div>
        <div style="padding: 10px; border-radius: 3px;text-align:center;">
            <div style="height:90px; background-color:#a3c9e0; justify-content:center; align-items:center; color:red; border: 1px solid blue; border-radius: 3px">
                <div>flex:設定<span style="color:orange">display:flex</span></div>
                <div style="display:flex; gap: 10px; ">
                    <div style="display:flex; width:50%; height: 50px; background-color:palegreen; justify-content:center; align-items:center; margin-left:10px; border: 1px solid green; border-radius:3px;">
                        <span style="color:orange;">flex:設定</span>
                    </div>
                    <div style="display:flex; flex: none; width:30%; height: 50px; background-color:palegreen; justify-content:center; align-items:center; border: 1px solid green; border-radius:3px;">
                        <span style="color:orange;">flex:設定</span>
                    </div>
                    <div style="display:flex; flex:auto; height: 50px; background-color:palegreen; justify-content:center; align-items:center; margin-right:10px; border: 1px solid green; border-radius:3px;">
                        <span style="color:orange;">...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    ```
    :::

- **水平對齊**
    - 水平靠右
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
    <div style="text-align:center;">display:flex<span style="color:red">justify-content:flex-end</span></div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content:flex-end;">
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
        </div>
    </div>
    
    :::spoiler 程式碼
    ```html
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
    <div style="text-align:center;">display:flex<span style="color:red">justify-content:flex-end</span></div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content:flex-end;">
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
        </div>
    </div>
    ```
    :::
    
    - 水平置中
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
    <div style="text-align:center;">display:flex<span style="color:red">justify-content:center</span></div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content:center;">
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
        </div>
    </div>
    
    :::spoiler 程式碼
    ```html
    <div style="background-color:#f0f0f0; border-radius: 3px; border:1px solid">
    <div style="text-align:center;">display:flex<span style="color:red">justify-content:center</span></div>
        <div style="display: flex; gap: 10px; padding: 10px; border-radius: 3px;justify-content:center;">
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
            <div style="width: 30%; height: 60px; background-color: #a3c9e0; border-radius: 3px; border:1px solid blue; text-align:center;"><font color:red>flex:none;</font></br><span style="color:orange">width:30%</span></div>
        </div>
    </div>
    ```
    :::
    
- **垂直對齊**
    - 垂直靠中
    <div style="background-color:#f0f0f0; border-radius:3px; height: 150px;border:1px solid;text-align:center;"><span>display:flex;</span><span style="color:red;">align-items:center</span>
        <div style="display:flex; align-items:center; justify-content:center; gap: 10px; height:65%">
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
        </div>
    </div>
    
    :::spoiler 程式碼
    > [!Note]因為有文字的緣故，部分高度、寬度有做微調
    ```html
    <div style="background-color:#f0f0f0; border-radius:3px; height: 150px;border:1px solid;text-align:center;"><span>display:flex;</span><span style="color:red;">align-items:center</span>
        <div style="display:flex; align-items:center; justify-content:center; gap: 10px; height:65%">
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
        </div>
    </div>
    ```
    :::
    
    - 垂直靠下
    <div style="background-color:#f0f0f0; border-radius:3px; height: 150px;border:1px solid;text-align:center;"><span>display:flex;</span><span style="color:red;">align-items:flex-end</span>
        <div style="display:flex; align-items:flex-end; justify-content:center; gap: 10px; height:75%">
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
        </div>
    </div>

    :::spoiler 程式碼
    > [!Note]因為有文字的緣故，部分高度、寬度有做微調
    ```html
    <div style="background-color:#f0f0f0; border-radius:3px; height: 150px;border:1px solid;text-align:center;"><span>display:flex;</span><span style="color:red;">align-items:flex-end</span>
        <div style="display:flex; align-items:flex-end; justify-content:center; gap: 10px; height:75%">
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
            <div style="border:1px solid blue; border-radius:3px; background-color:#a3c9e0; width:45%; height:30px"></div>
        </div>
    </div>
    ```
    :::
    
- **完美置中**
    <div style="background-color:#f0f0f0; height: 200px; border:1px solid; border-radius:3px; text-align:center;">
        <div>display:flex;</div>
    <div style="color:red">justify-content:center;<span style="color:orange">align-items:center</span></div>
        <div style="display:flex; align-items:center; justify-content:center; height: 45%;">
            <div style="border:1px solid blue; border-radius:3px;background-color:#a3c9e0; width:50%; height:60%; text-align:center;">
                <div>flex:none;</div>
                <div>width:50%</div>
            </div>
        </div>
    </div>

    :::spoiler 程式碼
    ```html
    > [!Note]因為有文字的緣故，部分高度、寬度有做微調
    <div style="background-color:#f0f0f0; height: 200px; border:1px solid; border-radius:3px; text-align:center;">
        <div>display:flex;</div>
    <div style="color:red">justify-content:center;<span style="color:orange">align-items:center</span></div>
        <div style="display:flex; align-items:center; justify-content:center; height: 45%;">
            <div style="border:1px solid blue; border-radius:3px;background-color:#a3c9e0; width:50%; height:60%; text-align:center;">
                <div>flex:none;</div>
                <div>width:50%</div>
            </div>
        </div>
    </div>
    ```
    :::
    
## 🎬 影片 9: RWD 回應式設計核心概念

### 🎯 本集重點 (Key Takeaways)
* **重點一：RWD 的目標**
    * RWD (Responsive Web Design) 的核心目標，是讓網站在各種尺寸的裝置（電腦、平板、手機）上，都能提供最佳的瀏覽與閱讀體驗。
* **重點二：Viewport Meta 標籤**
    * 這是實作 RWD 的**第一步**，也是**必要**的一步。它告訴行動裝置的瀏覽器「不要縮放網頁，請以裝置的實際寬度來呈現」，是 RWD 能正常運作的基礎。
* **重點三：Media Query 技術**
    * 這是 RWD 的主要技術核心。它允許我們像寫 `if` 判斷式一樣，針對不同的螢幕條件（例如螢幕寬度），來套用不同的 CSS 樣式，從而改變版面配置。

### 📝 詳細筆記與心得 (Notes & Reflections)

* **1. 什麼是 RWD 回應式設計？**
    * 簡單來說，就是讓網頁版面能夠「回應」不同裝置的螢幕寬度，自動調整成最適合閱讀的樣子。
    * **電腦螢幕**寬度較大，可以容納水平並排的多欄位版面。
        ![image](https://hackmd.io/_uploads/H1U6FznHle.png =80%x)
    * **手機螢幕**寬度較窄，通常會將版面調整為垂直堆疊的單欄樣式。
        ![image](https://hackmd.io/_uploads/BJ0spf3Slg.png =80%x)

---

* **2. 實現 RWD 的兩大基石**

    > [!WARNING]
    > **基石一：必須設定 Viewport Meta 標籤**
    >
    > 如果沒有在 HTML 的 `<head>` 中加入這行程式碼，手機瀏覽器會用「假裝是桌面」的模式來渲染網頁，導致整個頁面被縮小，Media Query 也無法正確運作。

    ```html
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    ```

    > [!TIP]
    > **基石二：使用 Media Query**
    >
    > 這是改變樣式的技術核心，讓我們可以設定在什麼「條件」下，要套用哪一些特定的 CSS。

    * **基本語法**
        ```css
        @media (螢幕條件) {
            /* 當符合螢幕條件時，這裡的 CSS 樣式就會生效 */
        }
        ```

    * **常用條件：`max-width` 與 `min-width`**
        * `(max-width: 1200px)`：當螢幕寬度 **小於或等於** 1200px 時套用。常用於「桌面版優先 (Desktop First)」的設計，先寫好電腦版樣式，再針對較小螢幕做調整。
        * `(min-width: 768px)`：當螢幕寬度 **大於或等於** 768px 時套用。常用於「行動版優先 (Mobile First)」的設計，先寫好手機版樣式，再針對較大螢幕做擴充。

    * **完整範例**
        這個範例預設是兩個區塊水平排列，當螢幕寬度小於 600px 時，會變成垂直排列。
        ```css
        /* 預設樣式 (大螢幕) */
        .container {
            display: flex;
            background-color: lightblue;
        }
        .item {
            flex: 1; /* 平分寬度 */
            padding: 20px;
            text-align: center;
        }

        /* 當螢幕寬度在 600px 以下時 */
        @media (max-width: 600px) {
            .container {
                flex-direction: column; /* 將排列方向改為垂直 */
                background-color: lightgreen;
            }
        }
        ```
        ```html
        <div class="container">
            <div class="item">區塊一</div>
            <div class="item">區塊二</div>
        </div>
        ```
        
## 🎬 影片 10: RWD 回應式設計實務技巧

### 🎯 本集重點 (Key Takeaways)
* **重點一：改變排版佈局 (Layout Change)**
    * 在不同螢幕寬度下，改變項目的排列方式，是 RWD 最核心的技巧。最常見的就是利用 `flex-wrap` 或 `flex-direction` 將多欄式佈局轉為單欄式。
* **重點二：調整內容尺寸 (Content Sizing)**
    * 為了最佳閱讀性，在小螢幕上可能需要縮小圖片、調整文字大小，或將固定寬度的元素改為百分比寬度。
* **重點三：顯示/隱藏元素 (Element Toggling)**
    * 針對不同裝置提供專屬的內容。最經典的例子就是電腦版顯示完整導覽列，手機版則切換為漢堡選單圖示。
* **重點四：控制內容換行 (Wrapping Control)**
    * 透過 CSS 控制文字或特定元素（如 `<br>`）是否換行，來微調不同裝置上的版面細節。

### 📝 詳細筆記與心得 (Notes & Reflections)

* **1. 改變排版佈局：從多欄到單欄**
    * 這是 RWD 最常見的模式：在寬螢幕上，內容項目水平並排；隨著螢幕變窄，項目數量減少，直到在手機上變成單一欄垂直堆疊，以利滑動閱讀。
    ![image](https://hackmd.io/_uploads/BJu1kVRBxg.png =80%x)
    * **實作技巧**：在 Flexbox 容器上使用 `flex-wrap: wrap;`，當子項目的總寬度超過容器寬度時，就會自動換行。

* **2. 適當的調整內容尺寸**
    * 除了版面結構，內容本身的尺寸也需要調整。例如，在手機上標題文字可能需要稍微縮小，才不會佔據過多版面。
    ![image](https://hackmd.io/_uploads/ryQm1VCrxx.png =80%x)
    * **實作技巧**：在 Media Query 中，針對特定元素重新設定 `font-size`、`width` 或 `height`。
        ```css
        /* 預設標題大小 */
        .title { font-size: 48px; }

        /* 在手機上縮小標題 */
        @media (max-width: 500px) {
            .title { font-size: 32px; }
        }
        ```

* **3. 控制內容是否換行**
    * 有時候我們希望某個換行 `<br>` 標籤只在特定裝置上生效。可以透過 `display` 屬性來控制。
    * **HTML 結構**：
        ```html
        <div>大家好<br/>我是666</div>
        ```
    * **CSS 控制**：
        ```css
        /* 在大螢幕上，讓 <br> 正常發揮換行作用 */
        br { display: block; /* 或者維持預設 */ }

        /* 在小螢幕上，隱藏 <br>，讓文字不換行 */
        @media (max-width: 500px) {
            br { display: none; }
        }
        ```

* **4. 顯示/隱藏元素 (Desktop/Mobile Toggle)**
    * 當兩種裝置的版面差異太大，難以用同一份 HTML 結構呈現時，可以「做兩份，視螢幕切換」。例如電腦版的文字選單和手機版的漢堡圖示。
    * **HTML 結構**：
        ```html
        <div class="desktop-menu">選項一 | 選項二</div>
        
        <div class="mobile-menu">☰</div>
        ```
    * **CSS 設定**：
        ```css
        /* 預設(電腦版)顯示 .desktop-menu，隱藏 .mobile-menu */
        .desktop-menu { display: block; }
        .mobile-menu { display: none; }

        @media (max-width: 500px) {
            /* 在螢幕寬度小於 500px 時反過來 */
            .desktop-menu { display: none; }
            .mobile-menu { display: block; }
        }
        ```

---
* **5. 綜合練習：打造一個回應式產品列表**
    * **目標成果**
        * **電腦版 (>=1250px)**：一行四個產品
        * **平板 (501px ~ 1249px)**：一行兩個產品
        * **手機版 (<=500px)**：一行一個產品，並切換成漢堡選單

    | 電腦 (Desktop) | 平板 (Tablet) | 手機 (Mobile) |
    | :---: | :---: | :---: |
    | ![image](https://hackmd.io/_uploads/rJgO4V0Hll.png) | ![image](https://hackmd.io/_uploads/SJYfN40Hgl.png) | ![image](https://hackmd.io/_uploads/SyxV44Rrlx.png) |

    :::spoiler 完整程式碼與詳解
    * **HTML (`index.html`)**
    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RWD 回應式網頁切版</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="headline">這是一個回應式設計網頁的範例</div>

        <div class="desktop-menu">選項一、選項二、選項三</div>
        <div class="mobile-menu">
            <img src="[https://i.imgur.com/v33m3Nn.png](https://i.imgur.com/v33m3Nn.png)" width="30" height="30"/>
        </div>

        <div class="list">
            <div class="product">Product 1</div>
            <div class="product">Product 2</div>
            <div class="product">Product 3</div>
            <div class="product">Product 4</div>
        </div>
    </body>
    </html>
    ```

    * **CSS (`style.css`)**
    ```css
    /* ===== 預設樣式 (桌面版) ===== */
    .headline {
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 15px;
        text-align: center;
    }

    /* 技巧4：預設顯示電腦版選單 */
    .desktop-menu {
        text-align: center;
        display: block;
    }

    /* 技巧4：預設隱藏手機版選單 */
    .mobile-menu {
        text-align: center;
        display: none;
    }

    .list {
        display: flex;
        justify-content: center;
        /* 在大螢幕預設不換行，讓所有產品排在同一行 */
        flex-wrap: nowrap;
    }

    .product {
        flex: none; /* 產品項目本身不縮放 */
        width: 280px; /* 每個產品固定寬度 */
        height: 150px; /* 加上高度方便觀察 */
        margin: 10px;
        background-color: #ffcccc;
        text-align: center; /* 文字置中 */
        line-height: 150px; /* 讓文字垂直置中 */
    }

    /* ===== 中等螢幕樣式 (平板) ===== */
    @media (max-width: 1250px) {
        /* 技巧1：允許產品列表換行 */
        .list {
            flex-wrap: wrap;
        }
        /* 技巧2：調整產品寬度，讓一行能塞兩個 */
        .product {
            width: 45%;
        }
    }

    /* ===== 小螢幕樣式 (手機) ===== */
    @media (max-width: 500px) {
        /* 技巧2：再調整產品寬度，讓一行只能塞一個 */
        .product {
            width: 90%;
        }
        /* 技巧4：隱藏電腦版選單 */
        .desktop-menu {
            display: none;
        }
        /* 技巧4：顯示手機版選單 */
        .mobile-menu {
            display: block;
        }
    }
    ```
    :::