<!-- 1. Flexbox 布局核心 -->
<!-- 场景：导航栏，Logo在左，按钮在右 -->
<header class="nav-bar">
  <h3>CodeStore</h3>
  <button>登录</button>
</header>

/* 对应的 CSS (关键) */
.nav-bar {
  display: flex;           /* 开启弹性布局 */
  justify-content: space-between; /* 两端对齐，中间留白 */
  align-items: center;     /* 垂直居中 */
}

----------------------------------------

<!-- 2. 语义化标签与绝对定位 -->
<article class="card">
  <!-- 这是一个悬浮的角标 -->
  <span class="badge">热销</span>
  
  <div>图片区域</div>
  <div>文字区域</div>
</article>

/* 对应的 CSS */
.card {
  position: relative;      /* 父元素相对定位(做参考系) */
}
.badge {
  position: absolute;      /* 绝对定位(飞起来) */
  top: -5px;               /* 稍微超出顶部一点 */
  left: -5px;
}

----------------------------------------

<!-- 3. JS 交互逻辑 -->
<script>
function toggleLike(btn) {
  // 简单的状态切换逻辑
  if (btn.innerText === "收藏") {
     btn.innerText = "已收藏 ❤️";
     btn.style.background = "#fff";
     btn.style.color = "#ef4444";
     btn.style.border = "1px solid #ef4444";
  } else {
     btn.innerText = "收藏";
     btn.style.background = "#2563eb"; // 恢复蓝色
     btn.style.color = "white";
     btn.style.border = "none";
  }
}
</script>