# 📚 前端網頁開發基礎(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; } } ``` :::