# Day12. HTML & CSS 小元件：標籤 (Badge/Tag Component)

2025 iThome 鐵人賽

DAY 12

Modern Web

30天技能樹養成：開啟前端冒險秘境系列第 12 篇

17th鐵人賽

evangeline_77

團隊nutc imac

2025-09-26 14:19:03

30 瀏覽

分享至

昨天我們在卡片上加了「標籤 (Badge)」，今天要把它做成一個獨立的小元件，以後在網站各個地方都能用，更詳細的說說

1. 什麼是「標籤」？

標籤 (Tag/Badge) 就是網站上那種「小小的提示文字」：

新品
特價
熱銷

它們常用來告訴使用者「這個商品有什麼特別的地方」

2. 建立 HTML：內容結構

HTML

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

解釋:
<span>：一個行內元素，適合用來包住「短文字」
class="tag tag-new"：兩個 class：
tag → 基本樣式（所有標籤共用）
tag-new → 代表這是「新品」標籤，會有自己的顏色。

新品、特價、熱銷 → 這就是顯示在畫面上的文字。

小提示：
class 像是一個「標籤」，你可以貼很多不同的 class 來套用樣式

3. 加上 CSS：讓它有樣子

.tag {
  display: inline-block; /* 讓它變成小方塊 */
  padding: 4px 8px;      /* 內距：文字和邊框的距離 */
  border-radius: 4px;    /* 圓角 */
  font-size: 12px;       /* 字體大小 */
  color: #fff;           /* 字體顏色（白） */
}

.tag-new {
  background-color: #2ed573; /* 綠色-代表新品 */
}

.tag-sale {
  background-color: #ff4757; /* 紅色-代表特價 */
}

.tag-hot {
  background-color: #ffa502; /* 橘色-代表熱銷 */
}

重點：
.tag → 全部標籤的「共同造型」：有內距、圓角、白字。
.tag-new .tag-sale .tag-hot → 個別顏色，這樣不用每次都重新寫整段 CSS

4. 為什麼要拆成「共用樣式 + 個別樣式」？

因為同一種元件會出現在很多地方：

商品卡片
活動資訊
導覽列（像「3個通知」）

如果我們都用 .tag 管理，就算以後想改全部標籤的字體，只要改 .tag 就好，其他頁面會自動跟著變

HTML

CSS

/* --- 卡片外觀 --- */
.card {
  position: relative; /* 為了讓徽章能定位在卡片內 */
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.2s ease-in-out;
  margin: 20px auto; /* 置中用 */
}

/* 滑鼠移上去的效果 */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* --- 卡片圖片 --- */
.card-img {
  width: 100%;
}

/* --- 卡片內容 --- */
.card-content {
  padding: 16px;
}

/* --- 卡片標題 --- */
.card-title {
  font-size: 18px;
  margin: 0 0 8px;
}

/* --- 卡片描述 --- */
.card-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}

/* --- 卡片按鈕 --- */
.card-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.card-btn:hover {
  background-color: #0056b3;
}

/* --- 卡片徽章 (左上角小標籤) --- */
.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #ff4757;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
}

/* --- 卡片「禁用」狀態 --- */
.card.disabled {
  opacity: 0.6;
  pointer-events: none; /* 禁用點擊 */
}

.card.disabled .card-btn {
  background-color: #ccc;
}

/* --- 狀態標籤（新品/特價/熱銷）--- */
.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #fff;
  margin-right: 4px; /* 標籤間距 */
}

.tag-new {
  background-color: #2ed573; /* 綠色-新品 */
}

.tag-sale {
  background-color: #ff4757; /* 紅色-特價 */
}

.tag-hot {
  background-color: #ffa502; /* 橘色-熱銷 */
}

成果：