徽章

本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 22 课，共 35 课。

徽章是用于在其他元素旁显示数量或状态的小型指示标记。例如，用带数字的红色圆圈显示未读消息数量。它们通常附在按钮、图标或头像上。

它们为什么重要：

它们能让重要信息（例如通知）快速显示。
常用于应用、社交媒体和电子商务网站。

我们来创建一个简单的徽章：

首先，创建一个基本的 HTML 元素来放置你的徽章：

<button class="btn">
  Messages <span class="badge">5</span>
</button>

接下来，添加一些基础 CSS 来设置徽章的样式：

.btn {
  position: relative;
  padding: 10px 20px;
  font-size: 16px;
}

.badge {
  position: absolute;
  top: -5px;
  right: -10px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

这样，徽章就会显示在按钮的角落，标明消息数量。

挑战

简单

给你提供了一段包含多个按钮的 HTML。你的任务是只使用 CSS 创建角标，让它们显示在每个按钮的右上角。具体任务如下：

设置角标的位置：使用 position: absolute，这样就可以相对于按钮放置角标。
将角标放在右上角：为 top 和 right 设置负值。
设置颜色和文字：使用红色背景和白色文字。
调整字体和内边距：设置 font-size: 12px; font-weight: bold; padding: 4px 7px;。
将角标设为圆形并增加立体感：使用 border-radius 和较浅的阴影（box-shadow: 0 2px 4px rgba(0,0,0,0.2)）。

亲手试试

<!DOCTYPE html>
<html>
<head>
  <title>Badges</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      background-color: #f5f5f5;
      display: flex;
      gap: 20px;
    }

    .button {
      position: relative; /* needed for badge positioning */
      padding: 12px 25px;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      background-color: #4cafef;
      color: white;
      cursor: pointer;
    }

    .button:hover {
      background-color: #3a92d8;
    }

    .badge {
      
    }
  </style>
</head>
<body>

  <button class="button">
    Messages
    <span class="badge">5</span>
  </button>

  <button class="button">
    Notifications
    <span class="badge">!</span>
  </button>

  <button class="button">
    Cart
    <span class="badge">3</span>
  </button>

</body>
</html>

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

前端实践中的所有课

自己练习： Web 在线编辑器