HTML怎么创建优惠券展示卡？手把手教你搭建促销coupon card结构

在电商促销或线下活动页面中，优惠券展示卡是常见的视觉组件。用纯HTML配合少量CSS就能搭出结构清晰、可维护性高的coupon card，不需要依赖图片切图。下面先给出一个基础结构示例，再逐步拆解每个区块的作用与实现要点。

一、优惠券卡片的整体HTML结构

优惠券展示卡本质上是一个横向的卡片容器，内部划分为左右两个信息区。左侧一般展示优惠力度，比如减多少或折扣；右侧展示使用条件、有效期与领取按钮。最直观的做法是用section作为最外层，里面放两个div分别表示左右区域。

这种结构的好处是语义清楚，后期用CSS控制布局时，只需要针对子容器设置flex比例即可。如果以后要支持竖排券，改一下flex方向就能复用同一套HTML。下面是一个最小可用的结构代码：

<section class="coupon-card">
  <div class="coupon-left">
    <p class="amount">￥50</p>
    <p class="condition">满200可用</p>
  </div>
  <div class="coupon-right">
    <h3>新人专享券</h3>
    <p>有效期至活动结束</p>
    <button type="button">立即领取</button>
  </div>
</section>

上述代码中，coupon-left与coupon-right是布局关键类。我们没有使用table来做分栏，因为券中间常需要锯齿或虚线分割，用flex加伪元素更灵活。同时所有文字都用段落或标题标签包裹，屏幕阅读器能正常识别。

二、用CSS实现左右分栏与撕口效果

结构写好之后，样式决定了券是否像“真券”。最基础的是给coupon-card设置display:flex，让左右区横向排列，再给左侧固定宽度、右侧自动占满。为了让中间有撕开的感觉，可以用左侧的右边框做成虚线，或者用伪元素画一排半圆。

下面示例用CSS变量统一管理主题色，方便同一页面放多种券。伪元素::after放在左区右侧，用radial-gradient画出连续半圆，模拟票根锯齿。注意代码里所有小于号都做了转义：

.coupon-card {
  --theme-color: #ff5722;
  display: flex;
  max-width: 480px;
  border-radius: 8px;
  overflow: hidden;
  font-family: sans-serif;
}
.coupon-left {
  width: 140px;
  background: var(--theme-color);
  color: #fff;
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.coupon-left::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: radial-gradient(circle, #fff 3px, transparent 4px) repeat-y;
  background-size: 6px 12px;
}
.coupon-right {
  flex: 1;
  padding: 16px 20px;
  background: #fff;
}

这种写法的优势在于：撕口是纯CSS生成，不用切图，高清屏不会糊；改--theme-color就能换肤。缺点是伪元素锯齿在极窄屏可能密集，可通过媒体查询调background-size缓解。相比用背景图，维护性提升明显。

三、增加响应式与多券批量渲染建议

促销活动往往一次展示多张券，如果每张写死结构，后期改文案很痛苦。推荐把单券结构封装成片段，用后端或前端模板循环输出。HTML层面保持类名一致，CSS用变量区分状态，比如已领取的券变灰。

移动端适配时，可以给coupon-card加flex-wrap，让右侧说明区在很窄时落到左区下方，但优惠券通常宽度可控，更常见是直接限制最小宽度并居中。下面是一段响应式补充样式：

@media (max-width: 360px) {
  .coupon-card {
    max-width: 100%;
  }
  .coupon-left {
    width: 110px;
    padding: 14px 0;
  }
}
.coupon-card.disabled {
  filter: grayscale(1);
  opacity: 0.6;
}

通过disabled类控制视觉置灰，比重新写一套结构省事。如果券数据来自接口，只要保证字段映射到amount、condition等节点即可。整体来看，HTML建优惠券展示卡并不复杂，重点是把结构语义化、样式参数化，后续运营配置就能自助完成。

HTMLcoupon_cardCSS布局修改时间：2026-08-02 03:15:24