網頁連結教學第三課：卡片連結設計

1

卡片連結有哪幾種？

卡片是網站的「入口」🚪

在首頁上，我們常常會放很多「卡片」，
每張卡片代表一個課程、一篇文章或一個功能。

使用者看到卡片後，會想要「點進去看更多」。
所以我們要讓卡片變成可以點擊的連結！

👇 三種常見的卡片連結設計（滑鼠移過去試試看！）

類型一

整張卡片可點擊

📄

HTML 教學

點擊卡片任何地方都可以跳轉

類型二

卡片內按鈕連結

🎨

CSS 教學

只有按鈕可以點擊

開始學習 →

類型三

卡片內多個連結

⚡

JavaScript

有多個不同的連結

開始學習

💡 哪種最常用？

類型一（整張卡片可點擊）最常用！
因為使用者不用瞄準小按鈕，點卡片任何地方都可以，體驗最好！

2

類型一：整張卡片可點擊

要讓整張卡片可以點擊，秘訣是：
用 <a> 標籤把整個卡片包起來！

📄 HTML 結構

<a href="html-tutorial.html" class="card-link"> <div class="card"> <div class="icon">📄</div> <h3>HTML 教學</h3> <p>學習網頁基礎</p> </div> </a>

🎨 CSS 樣式

/* 移除連結的預設樣式 */ .card-link { text-decoration: none; color: inherit; display: block; } /* 卡片 hover 效果 */ .card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); }

⚠️ 重要！移除連結預設樣式

<a> 標籤預設會有藍色字和底線。
要加上 text-decoration: none 和 color: inherit 把它移除！

3

讓卡片有 Hover 效果

Hover = 滑鼠移上去 🖱️

當使用者把滑鼠移到卡片上面時，
卡片應該要有「反應」，讓使用者知道「這個可以點」！

常見的 Hover 效果有：浮起來、變色、加陰影、放大...等等

👇 把滑鼠移到卡片上看看效果！

🚀

我會浮起來！

滑鼠移過來試試看

✨ 效果：浮起來 + 陰影變大 + 邊框出現 + 圖示旋轉

🎨 常用的 Hover CSS 屬性：

效果	CSS 寫法	說明
浮起來	`transform: translateY(-10px)`	往上移動 10px
放大	`transform: scale(1.05)`	放大 1.05 倍
加陰影	`box-shadow: 0 20px 40px rgba(0,0,0,0.2)`	更明顯的陰影
變色邊框	`border-color: #FF6B6B`	邊框變成指定顏色
滑順過渡	`transition: all 0.3s ease`	讓變化有動畫效果

💡 記得加 transition！

如果沒有 transition，hover 效果會「瞬間跳過去」，很突兀！
加上 transition: all 0.3s ease 就會平滑過渡。

4

完整程式碼範例

這是一個完整的可點擊卡片程式碼，可以直接複製使用：

可點擊卡片完整範例

              <!-- ========== HTML 結構 ========== -->

              <!-- 卡片容器 -->
              <div
              class="cards-container">

              <!-- 卡片一：HTML 教學 -->
              <a
                href="html-tutorial.html"
                class="card-link">
              <div
              class="card">
              <div
              class="card-icon">📄</div>
              <h3>HTML 入門教學</h3>
              <p>學習網頁的骨架結構</p>
              <span
              class="card-btn">開始學習 →</span>
              </div>
              </a>

              <!-- 卡片二：CSS 教學 -->
              <a
                href="css-tutorial.html"
                class="card-link">
              <div
              class="card">
              <div
              class="card-icon">🎨</div>
              <h3>CSS 美化教學</h3>
              <p>讓網頁變得漂亮</p>
              <span
              class="card-btn">開始學習 →</span>
              </div>
              </a>

              </div>

              <!-- ========== CSS 樣式 ========== -->

              <style>
              /* 卡片容器：用 Grid 排列 */
              .cards-container {
              display:
              grid;
              grid-template-columns:
              repeat(auto-fit, minmax(280px, 1fr)); gap:
              25px; }

              /* 連結樣式：移除預設樣式 */
              .card-link {
              text-decoration:
              none;
              color:
              inherit;
              display:
              block; }

              /* 卡片樣式 */
              .card {
              background:
              white;
              padding:
              30px;
              border-radius:
              20px;
              box-shadow:
              0 10px 30px rgba(0,0,0,0.1);
              border:
              3px solid transparent;
              transition:
                all 0.3s ease;
                /* 重要！ */
              }

              /* 卡片 Hover 效果 */
              .card:hover {
              transform:
              translateY(-10px);
              box-shadow:
              0 20px 40px rgba(0,0,0,0.2);
              border-color:
              #667eea; }

              /* 卡片圖示 */
              .card-icon {
              font-size:
              50px;
              margin-bottom:
              15px; }

              /* 卡片按鈕（裝飾用）*/
              .card-btn {
              display:
              inline-block;
              background:
              linear-gradient(135deg, #667eea, #764ba2); color:
              white;
              padding:
              10px 25px;
              border-radius:
              25px;
              margin-top:
              15px; }
              </style>
            

5

動手做！把卡片加到首頁

打開你的 index.html

找到主要內容區（main-content）裡面放卡片的地方

用 <a> 包住每張卡片

在 <div class="card"> 外面加上 <a href="目標頁面.html" class="card-link">

加上 CSS 樣式

在 <style> 裡面加上 .card-link 和 .card:hover 的樣式

建立目標頁面

確保 href 裡面寫的檔案（如 html-tutorial.html）真的存在！

測試連結

用瀏覽器打開，點擊卡片看看能不能跳轉成功！

6

補充：類型二 - 卡片內按鈕連結

如果你希望只有「按鈕」可以點擊，而不是整張卡片，可以這樣寫：

按鈕連結寫法

              <!-- 卡片本身不是連結，按鈕才是 -->

              <div
              class="card">
              <div
              class="card-icon">📄</div>
              <h3>HTML 入門教學</h3>
              <p>學習網頁的骨架結構</p>

              <!-- 只有這個按鈕是連結 -->
              <a
                href="html-tutorial.html"
                class="card-btn">開始學習 →</a>
              </div>
            

💡 什麼時候用類型二？

當卡片裡面有多個不同的連結時，就不能用整張卡片包起來。
例如：一張卡片有「查看教學」和「下載講義」兩個不同的按鈕。

今天學到的重點

卡片連結有三種：整張可點擊、按鈕連結、多個連結
整張卡片可點擊：用 <a> 包住整個卡片
要加上 text-decoration: none 和 color: inherit 移除連結預設樣式
Hover 效果讓使用者知道「這個可以點」
常用 Hover 效果：浮起來、加陰影、變色邊框
一定要加 transition 讓動畫平滑！
如果卡片有多個不同連結，就用類型二（按鈕連結）