昨天我們學會了如何做「標籤 (Tag/Badge)」，並且了解了「共用樣式 + 個別樣式」的基本概念。今天要更進一步，討論標籤在不同情境下的應用，以及如何加入互動效果，讓它不只是靜態的裝飾，而是更有有趣的介面元素。

1. 標籤可以放在哪些地方？

標籤不只是商品卡片的裝飾，它能夠提供使用者快速資訊：

• 商品卡片：新品、特價、熱銷，方便用戶快速篩選
• 通知系統：如「3個新通知」、「有更新」，讓使用者即時感知
• 分類標籤：文章、影片、產品分類，讓使用者快速找到相關內容
• 按鈕提示：例如「付費版」、「試用版」、「免費」，幫助決策
• 狀態指示：像「上線中」、「已完成」、「進行中」等狀態顯示

重點：標籤通常是短小的訊息，幾個字就能表達核心資訊，並且要讓人一眼就看懂

2. 多種標籤排列方式

在實際設計中，標籤不會只出現單一個，通常會「群組」出現，例如:多個分類或多個屬性。
這時候就需要排版技巧來讓畫面保持整齊，我們可以用 CSS 控制標籤排列，如：

HTML

<div class="tag-group">
  <span class="tag tag-new">新品</span>
  <span class="tag tag-sale">特價</span>
  <span class="tag tag-hot">熱銷</span>
</div>

CSS

.tag-group {
  display: flex;        /* 橫向排列 */
  gap: 6px;             /* 標籤之間間距，可調整 */
  flex-wrap: wrap;      /* 超過寬度自動換行 */
  margin-bottom: 12px;  /* 和其他元素分開 */
}
.tag:hover {
  opacity: 0.8;         /* 略透明 */
  transform: scale(1.05); /* 放大一點 */
  transition: 0.2s;
}

• flex-wrap: wrap保證在小螢幕不會超出容器
• gap 比用 margin-right 更乾淨易控
  --可以讓標籤在小螢幕時自動換行，並保持間距整齊--

標籤互動效果 (Hover)：

1. 效果不只美觀，也在提示「這個元素可互動」，例如:當使用者滑鼠經過標籤時，會有變化...
2. 提升「可點擊/可注意」感

這樣標籤就成為卡片的一部分，能夠清楚地傳達商品訊息~

3.在卡片中應用

把標籤放入卡片元件中，效果會更完整：

<div class="card">
  <img src="product.jpg" alt="商品圖片" class="card-img">
  <div class="card-content">
    <h3 class="card-title">商品名稱</h3>
    <p class="card-description">商品介紹</p>

    <div class="tag-group">
      <span class="tag tag-new">新品</span>
      <span class="tag tag-sale">特價</span>
    </div>

    <button class="card-btn">立即購買</button>
  </div>
</div>

配合之前學的的卡片元件，在這裡，標籤和按鈕一起出現：

• 標籤 → 告訴你「這是什麼樣的商品」
• 按鈕 → 提供「下一步行動」

這樣的結構既有資訊層級，又有行為引導~!

4. 小結

可以把「共用樣式」寫在如：.tag，再用修飾 class 控制狀態（如 .tag-new、.tag-sale），這樣修改顏色或大小時能一次套用全站!

• 標籤是一種小元件，傳達快速資訊
• 標籤可以在卡片、通知、分類標籤、按鈕提示中使用
• 標籤可以排列在一起，透過 flex 控制間距和換行
• 標籤可以加上 hover 或不同狀態，增加互動與訊息明確性
• 共用樣式 + 個別樣式 = 好維護、可重複使用