Jack 老師教學互動區: 1月 2026

2026年1月14日星期三

（HTML 結構、CSS 樣式、RWD 響應式、按鈕動畫與導覽列）的網頁版型綜合示範

（HTML 結構、CSS 樣式、RWD 響應式、按鈕動畫與導覽列）的網頁版型綜合示範。

這個練習會教你如何建立一個常見的「英雄區 (Hero Section)」，這是現代網頁中最常見的開頭版型。

1. 綜合版型結構 (HTML)

我們將網頁分為三個部分：導覽列、主視覺區（Hero）、以及功能介紹區。

HTML
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的綜合練習網頁</title>
    </head>
<body>

    <nav class="navbar">
        <div class="logo">GEMINI<span>DESIGN</span></div>
        <ul class="nav-links" id="nav-links">
            <li><a href="#">首頁</a></li>
            <li><a href="#">服務</a></li>
            <li><a href="#">關於</a></li>
        </ul>
        <div class="menu-btn" id="menu-btn">☰</div>
    </nav>

    <header class="hero">
        <div class="hero-content">
            <h1>打造你的夢想網頁</h1>
            <p>透過 HTML 與 CSS，你可以創造無限可能。從簡單的文字到精美的動畫，這就是前端開發的魅力。</p>
            <div class="btn-group">
                <button class="btn btn-primary">開始練習</button>
                <button class="btn btn-outline">瞭解更多</button>
            </div>
        </div>
    </header>

    <section class="features">
        <div class="card">
            <h3>結構化</h3>
            <p>使用 HTML5 語法建立清晰的內容骨架。</p>
        </div>
        <div class="card">
            <h3>美感化</h3>
            <p>利用 CSS3 讓你的網頁色彩奪目且具備質感。</p>
        </div>
        <div class="card">
            <h3>響應式</h3>
            <p>無論在手機或電腦上，都能完美呈現。</p>
        </div>
    </section>

</body>
</html>

2. 視覺美化與按鈕特效 (CSS)

CSS
<style>
    /* 基礎重設 */
    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

    /* 導覽列 */
    .navbar {
        display: flex; justify-content: space-between; align-items: center;
        padding: 20px 8%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        position: sticky; top: 0; z-index: 1000;
    }
    .logo { font-size: 24px; font-weight: bold; color: #333; }
    .logo span { color: #3498db; }
    .nav-links { display: flex; list-style: none; }
    .nav-links li { margin-left: 30px; }
    .nav-links a { text-decoration: none; color: #555; transition: 0.3s; }
    .nav-links a:hover { color: #3498db; }
    .menu-btn { display: none; font-size: 24px; cursor: pointer; }

    /* 英雄區 */
    .hero {
        height: 80vh;
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                    url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1350&q=80');
        background-size: cover; background-position: center;
        display: flex; align-items: center; justify-content: center;
        text-align: center; color: white; padding: 0 20px;
    }
    .hero-content h1 { font-size: 3rem; margin-bottom: 20px; }
    .hero-content p { font-size: 1.2rem; max-width: 600px; margin-bottom: 30px; opacity: 0.9; }

    /* 按鈕綜合應用 */
    .btn-group { display: flex; gap: 15px; justify-content: center; }
    .btn {
        padding: 12px 30px; border-radius: 5px; cursor: pointer;
        font-size: 16px; font-weight: bold; transition: all 0.3s ease;
        border: none;
    }
    .btn-primary { background: #3498db; color: white; }
    .btn-primary:hover { background: #2980b9; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(52,152,219,0.4); }
    
    .btn-outline { background: transparent; color: white; border: 2px solid white; }
    .btn-outline:hover { background: white; color: #333; }

    /* 功能卡片區 */
    .features { display: flex; padding: 50px 8%; gap: 20px; flex-wrap: wrap; }
    .card {
        flex: 1; min-width: 250px; padding: 30px;
        background: #f9f9f9; border-radius: 10px; transition: 0.3s;
        text-align: center; border-bottom: 4px solid transparent;
    }
    .card:hover { transform: translateY(-10px); border-bottom: 4px solid #3498db; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
    .card h3 { margin-bottom: 15px; }

    /* 手機版 RWD */
    @media (max-width: 768px) {
        .nav-links { display: none; }
        .menu-btn { display: block; }
        .hero-content h1 { font-size: 2rem; }
    }
</style>

3. 關鍵技巧解析

Flexbox 佈局：
- 在 .navbar 中，我們用 justify-content: space-between 讓 Logo 和選單分開。
- 在 .features 中，我們用 flex: 1 讓三個卡片平分寬度。
層次感 (Glassmorphism / Overlay)：
- 在英雄區背景圖中使用了 linear-gradient 的黑色半透明遮罩，這樣白色文字才會清晰。
按鈕動效：
- 使用了 transform: translateY(-3px)，讓滑鼠移上去時按鈕有「浮起來」的感覺，這比單純變色更有質感。
卡片設計：
- 加入 border-radius (圓角) 和 box-shadow (陰影)，是現代 UI 設計的基本功。

RWD（Responsive Web Design，響應式網頁設計）

網頁開發中非常重要的 RWD（Responsive Web Design，響應式網頁設計）。要讓導覽列在手機上「變身」，我們需要用到 CSS 的 媒體查詢（Media Queries）。

這是一個初學者也能理解的「漢堡選單」實作方式。

1. 核心觀念：媒體查詢 (Media Queries)

媒體查詢就像是給瀏覽器的指令：「如果螢幕寬度小於 768px（通常是手機/平板），就執行這套特殊的 CSS」。

2. 實作步驟

第一步：HTML 增加「漢堡圖示」

我們需要在原本的導覽列中加入一個按鈕，但在電腦版時先把它隱藏起來。

HTML
<nav class="navbar">
    <div class="logo">我的網站</div>
    
    <div class="menu-toggle" id="mobile-menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </div>

    <ul class="nav-links">
        <li><a href="#">首頁</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">關於</a></li>
    </ul>
</nav>

第二步：CSS 響應式佈局

我們利用 position: absolute 讓選單在手機版時「浮」在畫面上。

CSS
/* --- 電腦版樣式 (延用之前的) --- */
/* ... 省略部分基礎樣式 ... */

.menu-toggle { display: none; cursor: pointer; } /* 電腦版隱藏按鈕 */

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
}

/* --- 手機版樣式 (關鍵！) --- */
@media screen and (max-width: 768px) {
    .nav-links {
        display: none;        /* 預設先隱藏選單 */
        flex-direction: column; /* 改為垂直排列 */
        width: 100%;
        position: absolute;
        top: 70px;            /* 在導覽列下方 */
        left: 0;
        background-color: #2c3e50;
    }

    .nav-links.active {
        display: flex;       /* 當點擊按鈕時，加上 active 類別顯示選單 */
    }

    .menu-toggle {
        display: block;      /* 手機版顯示漢堡按鈕 */
    }
}

第三步：JavaScript 點擊切換

HTML/CSS 只能做出樣子，要點了會「彈出來」，需要一點點簡單的 JavaScript。

JavaScript
const menu = document.querySelector('#mobile-menu');
const menuLinks = document.querySelector('.nav-links');

// 當點擊漢堡按鈕時，切換 'active' 類別
menu.addEventListener('click', function() {
    menuLinks.classList.toggle('active');
});

3. 完整練習範例

將下方的代碼存成一個 HTML 檔案，然後試著縮小瀏覽器視窗，你會看到它自動從橫向導覽列變成漢堡選單！

HTML
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: sans-serif; }
        
        .navbar {
            background-color: #333;
            height: 70px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 30px;
            color: white;
        }

        .nav-links { list-style: none; display: flex; }
        .nav-links li { margin-left: 20px; }
        .nav-links a { color: white; text-decoration: none; }

        .menu-toggle { display: none; flex-direction: column; cursor: pointer; }
        .bar { width: 25px; height: 3px; background: white; margin: 4px 0; }

        /* 手機版適配 */
        @media (max-width: 768px) {
            .menu-toggle { display: flex; }
            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                position: absolute;
                top: 70px;
                left: 0;
                background-color: #444;
                text-align: center;
            }
            .nav-links.active { display: flex; }
            .nav-links li { margin: 20px 0; }
        }
    </style>
</head>
<body>

    <nav class="navbar">
        <div class="logo">LOGO</div>
        <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <ul class="nav-links" id="nav-list">
            <li><a href="#">首頁</a></li>
            <li><a href="#">產品</a></li>
            <li><a href="#">聯絡</a></li>
        </ul>
    </nav>

    <script>
        const menu = document.getElementById('mobile-menu');
        const navList = document.getElementById('nav-list');
        menu.onclick = () => navList.classList.toggle('active');
    </script>
</body>
</html>

學到這裡，你已經跨入了「網頁設計師」的門檻！

你已經學會了：

HTML 結構（骨架）
CSS 樣式與顏色（皮膚）
CSS 表格與導覽列（組件）
CSS 動畫與 RWD（靈魂）

導覽列

<!DOCTYPE html>

<head>

<title>專業導覽列練習</title>

<style>

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

body { font-family: 'Microsoft JhengHei', sans-serif; background-color: #f4f4f4; }

.navbar {

background-color: #2c3e50;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 50px;

height: 70px;

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}

.logo { color: #ecf0f1; font-size: 24px; letter-spacing: 2px; }

.nav-links { list-style: none; display: flex; }

.nav-links li { margin-left: 30px; }

.nav-links a {

text-decoration: none;

color: #bdc3c7;

font-weight: 500;

transition: 0.3s;

}

.nav-links a:hover { color: white; }

</style>

</head>

<body>

<div class="logo">GEMINI TECH</div>

</ul>

</nav>

<h2>歡迎來到我的專業頁面</h2>

<p>請嘗試將滑鼠移到上方導覽列看看效果！</p>

</div>

</body>

</html>

讓網頁元素「動起來」

要讓網頁元素「動起來」，主要有三種層次：虛擬類別（互動）、過渡（平滑轉場）、以及 關鍵字動畫（自動循環）。

這些全部都可以透過 CSS 來達成，不需要寫複雜的程式碼。

1. 互動效果：`:hover` (滑鼠懸停)

這是最常見的「動起來」方式。當滑鼠游標移到元素上方時，改變它的樣子。

語法：選擇器:hover { 變更的樣式 }

CSS
/* 預設按鈕樣式 */
.btn {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* 當滑鼠移上去時變色 */
.btn:hover {
  background-color: #2980b9; /* 變成深藍色 */
}

2. 平滑轉場：`transition`

如果只用 :hover，顏色切換會很生硬。加上 transition 後，變化會像動畫一樣平滑。

語法：transition: 屬性時間; (例如 0.3s 代表 0.3 秒)

CSS
.btn {
  background-color: #3498db;
  /* 告訴瀏覽器：所有屬性的變化都要在 0.3 秒內平滑完成 */
  transition: all 0.3s ease;
}

.btn:hover {
  transform: scale(1.1); /* 稍微放大 1.1 倍 */
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 增加陰影感 */
}

3. 自動動畫：`@keyframes`

如果你想要元素「自己一直動」（例如閃爍、旋轉、跳動），就需要定義「關鍵影格」。

步驟 A：定義動畫劇本

CSS
@keyframes bounce {
  0% { transform: translateY(0); }      /* 開始：位置 0 */
  50% { transform: translateY(-10px); } /* 中間：向上移動 10px */
  100% { transform: translateY(0); }    /* 結束：回到原位 */
}

步驟 B：將動畫套用到元素

CSS
.badge {
  display: inline-block;
  background: red;
  color: white;
  padding: 5px;
  /* 使用動畫：劇本名稱 時間 循環次數 */
  animation: bounce 1s infinite; 
}

4. 綜合範例：會動的按鈕與載入中圖示

你可以直接把這段代碼貼到你的 HTML 檔案中觀察效果：

HTML
<style>
  /* 互動按鈕 */
  .cool-button {
    background: linear-gradient(45deg, #ff6b6b, #f06595);
    border: none;
    color: white;
    padding: 15px 30px;
    font-size: 18px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s; /* 平滑過渡 */
  }

  .cool-button:hover {
    letter-spacing: 2px; /* 文字間距變大 */
    box-shadow: 0 10px 20px rgba(240, 101, 149, 0.4);
    transform: translateY(-3px); /* 向上微浮 */
  }

  /* 旋轉載入圈圈 */
  .loader {
    width: 40px;
    height: 40px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite; /* 無限旋轉 */
    margin: 20px;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
</style>

<button class="cool-button">探索更多</button>

<div class="loader"></div>
<p>載入中...</p>

總結小筆記

:hover：處理「使用者互動」。
transition：讓變化的過程變得「優雅、有質感」。
@keyframes：創造「自定義的連續動作」。

訂閱：意見 (Atom)

2026年1月14日 星期三