全栈：AXUM、React、NextJS 和 TailWindCSS

内容介绍
本专题假设你已经具备了基本的 HTML 5 、Javascript(ES6) 和 CSS 3 知识。本专题是为了补全 AXUM 全栈开发所需要的技术栈，而不是从零开始的前端课程，如果你还不具备以上知识，请通过其它途径学习完成之后，再来学习本专题。
React: 简介与安装
本章将通过编程世界通用的“Hello World”程序，告诉你：创建 React 应用的几种方法、虚拟DOM、JSX以及将 React 挂载到真实 DOM 的步骤。
支持试读
React：类式组件、函数式组件及state和props
本章将讨论 React 的类式组件、函数式组件以及 React 两个最重要的属性：`state` 和 `props`。
React: 组件的生命周期
本章将讨论 React 组件的常用生命周期。
支持试读
React: 事件处理、表单处理及受控组件与非受控组件
本章讨论 React 的事件处理，以及表单处理时涉及两个策略：受控组件与非受控组件。
React: 流程控制与key
本章将讨论 React(JSX) 的条件判断和循环。
React: 自定义组件及组件通讯
本章我们将正式开启 React 组件之路。虽然我们之前章节的都叫组件，但整个应用只有一个组件，略显单薄。同时，我们还将讨论组件之间如何进行通讯。
React: 路由
本章将讨论 React 的路由：通过路由，你可以制作出“多页面”的系统。
React: 状态共享
本章将通过一个非常典型的案例来讨论 React 的状态共享：只有登录用户才能看到某些内容。早期的 React 完全依靠其生态中的 redux 等第三方库来实现状态共享；现在 React 提供了官方的 `Context` 来实现这一目的。
React: SEO挑战、服务端渲染及本地存储
经过紧张的学习，React 课程终于暂告一个段落了。本章将是一个相对轻松的内容，我们一起探讨一下 React 应用的 SEO 以及为什么需要服务端渲染，同时对 React 课程做个简单的小结。
NextJS: 简介与安装
NextJS 是一个 React 框架，它提供了很多有用的功能把 React 的力量发挥地淋漓尽致。本章我们将开始 NextJS 之旅，首先自然是安装它，然后来一个「你好，NextJS」
NextJS: 渲染模式和数据获取
趁你现在对我们刚刚讨论的有关 React 和 SEO 的问题还保持有较强的印象，我们先来讨论 NextJS 是如何利用多种渲染模式来应用 SEO 挑战的。
NextJS: 内置组件及自动路由
NextJS 既然是 React 的框架，自然提供了一些内置组件来扩展 React。本章将介绍几个常用的 NextJS 内置组件，同时也将介绍 NextJS 的路由系统。
NextJS: 开发博客系统
本章我们将使用 NextJS 开发一个小型的博客系统，你将学习到如何从远程服务器获取数据以及数据过滤、NextJS 常用组件的用法、NextJS 的自动路由等功能。
Tailwind：简介与响应式设计的基本原则
TailwindCSS 是一款响应式的、移动设备优先的 CSS 工具类框架。本章对响应式布局、移动设备优先、断点等基本概念进行简要说明；并讨论几种安装 tailwind 的方式。
Tailwind: 通过小示例体验它
本章通过两个小示例来体验一下 tailwind 的魔力。
Tailwind: 默认配置
Tailwind 定义了一系列变量，比如颜色、大小、间距等。本章将介绍 tailwind 的一些默认设置。
Tailwind: 撸一个按钮
本章将带你使用 tailwind 撸一个按钮
Tailwind: 使用 flex 和 grid 进行响应式布局
本章我们将讨论使用 `flex` 和 `grid` 进行响应式布局，以及为什么不建议再使用 `float` 进行布局。
支持试读
Tailwind: 撸一个带图标和动画效果的下拉框
本章将使用 tailwind 实现一个没有任何 Javscript 代码的纯 CSS 的下拉框，把应用到导航栏、菜单栏时，也被称为下拉菜单。同时我们将讨论如何在 tailwind 中使用图标，包括图标的进化史：从字体文件到SVG。
Tailwind: 撸一个报价卡片
本章我们将使用 tailwind 撸一个报价卡片。
Tailwind: 撸一个响应式的纯CSS导航栏
本章将使用 tailwind 撸一个响应式的、纯 CSS 的导航栏。
Tailwind: 集成到React/NextJS
本章将介绍如何将 Tailwind 集成到 React 或 NextJS 项目中。
Tailwind: 复用
本章通过将之前撸的按钮改成 NextJS 版，进而讨论 Tailwind 的复用原则。
Tailwind: 配置和插件
本章将讨论如何配置 tailwind，以及几个 tailwind 官方插件。
Tailwind: 制作响应式博客
本章我们使用 tailwind 将之前课程中 NextJS 迷你博客改造为响应式的布局。

Tailwind: 撸一个报价卡片

17871
2022-11-18 15:13:39

本章我们将使用 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号灰色
#card-detail-1 > li
- before:mr-2：设置 ::before 伪类的右外边距为2
- before:content-['✅']：设置 ::before伪类的内容为 ✅
#card-buy-1 > button
- border-blue-600/95
  - 设置边框颜色为600号蓝色，透明度为95
  - 默认配置的，除了 white 和 black之外的所有类型的颜色都能设置透明度
  - 设置透明度的方式就是在颜色值后面加上 /95，你可以想象成是在做除法
- bg-gradient-to-br：使用从左上到右下的线性渐变
- from-blue-600/75、to-blue-600/90：分别设置起始渐变色和结束渐变色，同样它们也可以设置透明度。
- hover:bg-gradient-to-tl：当鼠标悬停时，使用从右下到左上的线性渐变

#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号灰色

#card-detail-1 > li

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

#card-buy-1 > button

border-blue-600/95
- 设置边框颜色为600号蓝色，透明度为95
- 默认配置的，除了 white 和 black之外的所有类型的颜色都能设置透明度
- 设置透明度的方式就是在颜色值后面加上 /95，你可以想象成是在做除法
bg-gradient-to-br：使用从左上到右下的线性渐变
from-blue-600/75、to-blue-600/90：分别设置起始渐变色和结束渐变色，同样它们也可以设置透明度。
hover:bg-gradient-to-tl：当鼠标悬停时，使用从右下到左上的线性渐变

border-blue-600/95

对多卡片进行布局

<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 断点，这样就能在视觉上产生关注点

container：正如上一章说的，tailwind 提供了容器类，就是它了。
- 已定义的断点上，它会把容器的最大宽度设置为与断点相同的大写
- 小于 sm 断点的屏幕上，它会把容器的宽度设置为 100%
- 不同于 bootstrap 这些框架，tailwind 的 container 不会自动水平居中，需要手动加上 mx-auto

已定义的断点上，它会把容器的最大宽度设置为与断点相同的大写
小于 sm 断点的屏幕上，它会把容器的宽度设置为 100%
不同于 bootstrap 这些框架，tailwind 的 container 不会自动水平居中，需要手动加上 mx-auto

在移动设备上，它是垂直布局的，并且有4个单位的垂直间隙
在桌面设备上，它是水平布局的，并且有8个单位的水平间隙

桌面设备：我们把原本属于 hover 伪类的样式直接给到了 md 断点，这样就能在视觉上产生关注点

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

要查看完整内容，请先登录

登录注册