(因時間關係，最後一天改為介紹另一種網頁。)
兩欄式版面
是指將網頁內容分成兩個主要的垂直欄位，通常用來展示主內容區和側邊欄。例如，左側可能是網站的導航或文章內容，而右側則可能是一些附加的資訊，如廣告、推薦文章或連結。
兩欄式版面的應用情境：
博客網站：左側展示文章內容，右側展示相關的推薦文章或廣告。
新聞網站：主內容展示新聞報導，側邊欄展示熱門新聞或即時更新。
製作兩欄式版面的步驟與流程：
左欄：主要內容區（如文章、文字段落）
右欄：側邊欄（如廣告、推薦內容）
2. 使用 HTML 定義結構
用 div 元素來定義頁面的結構，將兩個欄位分別放在兩個容器中。
範例 HTML：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兩欄式版面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的兩欄式網頁</h1>
</header>
<div class="container">
<!-- 左側內容區 -->
<main class="main-content">
<h2>文章內容</h2>
<p>這是主內容區。你可以在這裡放置文章、圖片或其他主要資訊。</p>
</main>
<!-- 右側側邊欄 -->
<aside class="sidebar">
<h2>側邊欄</h2>
<p>這是側邊欄。可以在這裡放置廣告、推薦連結或其他次要資訊。</p>
</aside>
</div>
<footer>
<p>© 2024 我的網站. 保留所有權利。</p>
</footer>
</body>
</html>
範例 CSS：
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.container {
display: flex;
max-width: 1200px;
margin: 20px auto;
gap: 20px;
}
.main-content {
flex: 2;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.sidebar {
flex: 1;
background-color: #ececec;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
footer {
text-align: center;
padding: 20px;
background-color: #333;
color: white;
}
流程解釋：
定義結構：我們在 HTML 中使用 div 來定義兩個欄位，main 代表主內容，aside 代表側邊欄。這兩個欄位都包裹在 .container 容器中。
CSS 佈局：我們使用 flexbox 來佈局兩個欄位，並使用 flex: 2 和 flex: 1 指定左側內容區佔較多空間，右側側邊欄佔較小空間。
響應式設計：當螢幕寬度小於 768px 時，flex-direction 會轉變為 column，讓兩個欄位變成垂直排列，方便在手機或平板等小螢幕設備上瀏覽。
其他方法：
除了 flexbox，也可以使用 CSS Grid 來實現兩欄式佈局。grid 提供了更靈活的佈局控制，特別適合需要更多複雜配置的版面設計。
.container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
iThome鐵人賽
看影片追技術