CSS 价格表生成器

基础骨架结构

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

响应式三列网格

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit 搭配 minmax(240px, 1fr)，桌面端自动排成三列，移动端自动堆叠成一列，不需要再做任何配置。

推荐套餐

能吸引注意力的视觉线索：

• 彩色边框，与品牌主色保持一致。
• 略微上移，用负的 margin-top 或 translateY(-4px) 实现。
• 更大的 CTA 按钮，通常用品牌色填充，其他套餐则用描边按钮。
• 角标（“最受欢迎”“最超值”）用绝对定位放在卡片顶部。
• 卡片更高，可以吸引视线，但会削弱套餐之间的可比性。

不要把上面这些全用上，挑两三个就够了。线索太多，视觉层级反而被拉平。

月付 / 年付切换

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

切换开关通常靠一小段 JavaScript 来替换价格数值，也可以借助单选按钮（radio）的 :checked 状态实现。记得把折扣百分比或能省下的金额直接写进按钮文案里，在很多价格表中，这是最具说服力的一个元素。

功能行的样式

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

“包含”的功能用对勾，“不包含”的功能用灰色文字或浅色叉号。不要在不降低对比度的情况下直接给文字加删除线，否则它读起来更像是强调而不是排除。

让 CTA 保持醒目

每个套餐一个 CTA，各套餐之间视觉上保持一致。不同套餐用不同文案（“免费开始”“升级到 Pro”“联系销售”）完全没问题，反而更能把用户引导到正确的流程里。

让它便于扫读

用户很少从左到右逐字读价格表：他们先扫价格，再看 CTA，最后才比功能差异。按这个顺序去优化：

1. 套餐名称和价格放大，置于卡片顶部。
2. CTA 不用滚动卡片就能看到。
3. 功能列表放在下方。重点突出套餐之间的差异，而不是在每一列重复相同的功能。

无障碍检查清单

• 每个套餐都是一个独立的 <article>，并带有自己的 <h3>。
• “最受欢迎”角标要是可见的文字标签，而不是只靠颜色区分（照顾色盲用户）。
• CTA 按钮使用描述性文案（“开始 Pro 试用”），而不是“点击这里”。
• 计费周期切换要带 aria-pressed，或者使用单选按钮（radio）的语义。
• 如果用 JavaScript 实现切换，价格变化要通过 aria-live="polite" 播报。