Tailwind: 撸一个报价卡片

全栈：AXUM、React、NextJS 和 TailWindCSS
17428
2022/11/18 23:13:39
axumfullstackreactnextjstailwind

本章我们将使用 tailwind 撸一个报价卡片。

首先，我们先从制作单一卡片开始，制作好了一个卡片，将它复制多份就可以了。

制作卡片

<div class="flex w-96 scale-95 flex-col items-center justify-center space-y-6 rounded-lg border-8 border-gray-600 bg-gradient-to-r from-gray-50 to-gray-100 p-6 shadow-md transition-all duration-500 hover:scale-100 hover:border-gray-800" id="card-1">
  <div class="flex flex-col items-center justify-center space-y-4" id="card-header-1">
    <h3 class="text-2xl" id="card-title-1">基础服务</h3>
    <div class="flex items-center justify-center space-x-2" id="card-price-box-1">
      <span class="block text-sm" id="card-price-only-1">仅需</span>
      <strong class="block text-xl text-blue-700" id="card-price-1">¥ 799</strong>
    </div>
  </div>
  <ul class="flex flex-col items-center justify-center space-y-2 text-gray-600" id="card-detail-1">
    <li class="before:mr-2 before:content-['✅']">专业级的服务</li>
    <li class="before:mr-2 before:content-['✅']">物超所值的享受</li>
    <li class="before:mr-2 before:content-['✅']">反正就是用了都说好</li>
    <li class="before:mr-2 before:content-['✅']">实在编不下去了</li>
  </ul>
  <div id="card-buy-1">
    <button class="rounded-md border border-blue-600/95 bg-gradient-to-br from-blue-600/75 to-blue-600/90 px-12 py-3 text-gray-100 hover:bg-gradient-to-tl hover:from-blue-700/75 hover:to-blue-700/90">订购</button>
  </div>
</div>

点击这里查看效果。

  • #card-1：卡片的主容器（为了查看效果，这里设置了宽度 w-96，下一节将去除这个宽度）

    • flex：开启 flex 布局
    • scale-95：整体缩小到原始大小的 95% 【文档】
    • flex-col：让子元素垂直布局
    • items-center：让子元素垂直居中
    • justify-center：让子元素居中分布
    • space-y-6：让每个子元素的垂直方向的间隙设置为6
    • rounded-lg：使用大小为 lg 的圆角
    • border-8：使用大小为8的边框
    • border-gray-600：使用600号灰色作为边框颜色
    • bg-gradient-to-r：使用从左到右的线性渐变背景【文档】
    • from-gray-50 ：使用50号灰色作为起始渐变色【文档】
    • to-gray-100：使用100号灰色作为结束渐变色
    • p-6：内边距为6
    • shadow-md：使用 md 大小的阴影
    • transition-all：开启全部过渡效果
    • duration-500：动画时间设置为500毫秒
    • hover:scale-100：鼠标悬停时，整体缩放到原始大小的 100%，即恢复到原始大小
    • hover:border-gray-800：鼠标悬停时，边框颜色改成800号灰色

  • #card-header-1：使用 flex 的垂直方向对子元素进行布局，并且居中对齐，垂直间隙为4

  • #card-title-1：将文字设置为2xl大小

  • #card-price-box-1：使用 flex 的水平方向对子元素进行布局，并且居中对齐，水平间隙为2

  • #card-price-only-1：设置为块级元素，并将文字设置为 sm 大小

  • #card-price-1：设置为块级元素，并将文字大小设置为 xl，使用将文字颜色设置为700号蓝色

  • #card-detail-1：使用 flex 的垂直方向对子元素进行布局，并且居中对齐，垂直间隙为2，并将文字颜色设置为600号灰色

    • before:mr-2：设置 ::before 伪类的右外边距为2
    • before:content-['✅']：设置 ::before伪类的内容为 ✅

  • #card-buy-1 > button

    • border-blue-600/95

      • 设置边框颜色为600号蓝色，透明度为95
      • 默认配置的，除了 white 和 black之外的所有类型的颜色都能设置透明度
      • 设置透明度的方式就是在颜色值后面加上 /95，你可以想象成是在做除法

    • hover:bg-gradient-to-tl：当鼠标悬停时，使用从右下到左上的线性渐变

对多卡片进行布局

<div class="container mx-auto my-60 bg-red-50" id="cta">
  <div class="flex flex-col items-end justify-center space-y-4 md:flex-row md:space-x-8" id="flex-cta">
    <div class="flex w-full scale-95 flex-col items-center justify-center space-y-6 rounded-lg border-8 border-gray-600 bg-gradient-to-r from-gray-50 to-gray-100 p-6 shadow-md transition-all duration-500 hover:scale-100 hover:border-gray-800 md:w-auto" id="card-1">
      <div class="flex flex-col items-center justify-center space-y-4" id="card-header-1">
        <h3 class="text-2xl" id="card-title-1">基础服务</h3>
        <div class="flex items-center justify-center space-x-2" id="card-price-box-1">
          <span class="block text-sm" id="card-price-only-1">仅需</span>
          <strong class="block text-xl text-blue-700" id="card-price-1">¥ 799</strong>
        </div>
      </div>
      <ul class="flex flex-col items-center justify-center space-y-2 text-gray-600" id="card-detail-1">
        <li class="before:mr-2 before:content-['✅']">专业级的服务</li>
        <li class="before:mr-2 before:content-['✅']">物超所值的享受</li>
        <li class="before:mr-2 before:content-['✅']">反正就是用了都说好</li>
        <li class="before:mr-2 before:content-['✅']">实在编不下去了</li>
      </ul>
      <div id="card-buy-1">
        <button class="rounded-md border border-blue-600/95 bg-gradient-to-br from-blue-600/75 to-blue-600/90 px-12 py-3 text-gray-100 hover:bg-gradient-to-tl hover:from-blue-700/75 hover:to-blue-700/90">订购</button>
      </div>
    </div>
    <div class="flex w-full scale-95 flex-col items-center justify-center space-y-6 rounded-lg border-8 border-gray-600 bg-gradient-to-r from-gray-50 to-gray-100 p-6 shadow-md transition-all duration-500 hover:scale-100 hover:border-gray-800 md:w-auto md:scale-100 md:border-gray-800" id="card-2">
      <div class="flex flex-col items-center justify-center space-y-4" id="card-header-2">
        <h3 class="text-2xl" id="card-title-2">标准服务</h3>
        <div class="flex items-center justify-center space-x-2" id="card-price-box-2">
          <span class="block text-sm" id="card-price-only-2">仅需</span>
          <strong class="block text-xl text-blue-700" id="card-price-2">¥ 3999</strong>
        </div>
      </div>
      <ul class="flex flex-col items-center justify-center space-y-2 text-gray-600" id="card-detail-2">
        <li class="before:mr-2 before:content-['✅']">专业级的服务</li>
        <li class="before:mr-2 before:content-['✅']">物超所值的享受</li>
        <li class="before:mr-2 before:content-['✅']">反正就是用了都说好</li>
        <li class="before:mr-2 before:content-['✅']">实在编不下去了</li>
      </ul>
      <div id="card-buy-2">
        <button class="rounded-md border border-blue-600/95 bg-gradient-to-br from-blue-600/75 to-blue-600/90 px-12 py-3 text-gray-100 hover:bg-gradient-to-tl hover:from-blue-700/75 hover:to-blue-700/90">订购</button>
      </div>
    </div>
    <div class="flex w-full scale-95 flex-col items-center justify-center space-y-6 rounded-lg border-8 border-gray-600 bg-gradient-to-r from-gray-50 to-gray-100 p-6 shadow-md transition-all duration-500 hover:scale-100 hover:border-gray-800 md:w-auto" id="card-3">
      <div class="flex flex-col items-center justify-center space-y-4" id="card-header-3">
        <h3 class="text-2xl" id="card-title-1">高级服务</h3>
        <div class="flex items-center justify-center space-x-2" id="card-price-box-3">
          <span class="block text-sm" id="card-price-only-3">仅需</span>
          <strong class="block text-xl text-blue-700" id="card-price-3">¥ 5899</strong>
        </div>
      </div>
      <ul class="flex flex-col items-center justify-center space-y-2 text-gray-600" id="card-detail-3">
        <li class="before:mr-2 before:content-['✅']">专业级的服务</li>
        <li class="before:mr-2 before:content-['✅']">物超所值的享受</li>
        <li class="before:mr-2 before:content-['✅']">反正就是用了都说好</li>
        <li class="before:mr-2 before:content-['✅']">实在编不下去了</li>
      </ul>
      <div id="card-buy-3">
        <button class="rounded-md border border-blue-600/95 bg-gradient-to-br from-blue-600/75 to-blue-600/90 px-12 py-3 text-gray-100 hover:bg-gradient-to-tl hover:from-blue-700/75 hover:to-blue-700/90">订购</button>
      </div>
    </div>
  </div>
</div>

点击这里查看代码和效果。

  • #cta：为了显示起来好看，临时用的容器，对于卡片本身来说，它可有可无。
    • container：正如上一章说的，tailwind 提供了容器类，就是它了。
      • 已定义的断点上，它会把容器的最大宽度设置为与断点相同的大写
      • 小于 sm 断点的屏幕上，它会把容器的宽度设置为 100%
      • 不同于 bootstrap 这些框架，tailwind 的 container 不会自动水平居中，需要手动加上 mx-auto
  • #flex-cta：用于布局多个卡片的容器
    • 在移动设备上，它是垂直布局的，并且有4个单位的垂直间隙
    • 在桌面设备上，它是水平布局的，并且有8个单位的水平间隙
  • 其它元素
    • 为了实现响应式布局，都以移动端优先，给每个元素通过md断点增加了适配不同设备的样式
    • 针对卡片2，
      • 桌面设备：我们把原本属于 hover 伪类的样式直接给到了 md 断点，这样就能在视觉上产生关注点

好了，本章至此结束，下一章我们将使用 tailwind 撸一个纯 CSS 的响应式的导航栏。