如何使用Tailwind CSS制作卡片组件

DebugUsery
1,084 阅读7分钟

使用Tailwind CSS制作卡片组件

什么是卡片组件？卡片组件就像一个容器，用来组合关于项目、产品或功能的相关信息。它们通常以一种吸引人的方式显示信息。

卡片组件可以是一个产品广告、一篇博客文章，甚至是一个用户资料。

在本教程结束时，你将了解如何使用Tailwind的CSS类创建和设计不同类型的卡片。

让我们跳入其中吧

将Tailwind添加到你的项目中

我将假设你已经将最新版本的Tailwind添加到你的项目中。

安装过程结束后，我们将把我们的Tailwind CSS样式表链接到我们的项目中，如下所示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./public/tailwind.css" />
  </head>
</html>

设置我们的页面

首先，我们将为我们的网页设置背景。在这种情况下，是绿色。

接下来，我们将指定我们的包含<div> ，如下图所示，卡片将被显示在其中。

<body class="bg-green-400">
  <div class="min-h-screen flex items-center justify-center space-x-5"></div>
</body>

这些类是做什么的？

  • min-h-screen 设置容器的最小高度等于屏幕高度的100%。
  • flex 使卡片垂直对齐。
  • items-center 和 ，将卡牌对准屏幕的中心。justify-center

建立我们的前两张卡片

这就是我们前两张卡片的样子。

Alert and Menu component

如上图所示，我们的第一个卡片是一个警报组件。它是一个向用户提供特定主题信息的卡片的例子。它有需要用户互动的按钮。

我们的第二个卡片是一个菜单组件。它包含与菜单项对齐的功能。这也是另一个可以使用卡片组件的例子。

现在让我们看看它是如何完成的!

让我们首先创建一个容器，<div> 。在这里，我们将把卡片排列成行，也就是说，卡片将被水平放置。

<div class="w-1/4 grid grid-rows-2 gap-y-2"></div>

下面是我们在上面添加的类的功能。

  • w-1/4 设置容器的宽度等于屏幕宽度的25%。
  • grid 使我们能够将div中的项目划分为行和列
  • grid-rows-2 将 项目分成两行。<div>
  • gap-y-2 在两行之间添加空间。

我们将使用一个容器开始创建第一个卡片，<div> ，如下面的代码所示。

<div class="rounded-lg shadow-xl bg-white">
  <div class="p-5">
    <!--Card Header-->
    <header class="font-semibold text-lg pb-5">Welcome to Tailwind CSS</header>
    <p class="text-gray-500 px-4">
      Lorem ipsum dolor sit amet, consectetur adip!
    </p>
    <footer class="text-center space-x-5">
      <button
        class="py-2 px-4 mt-5 border border-green-500 rounded-lg text-green-500 font-semibold hover:text-white hover:bg-green-600"
      >
        CANCEL
      </button>
      <button
        class="py-2 px-4 mt-5 bg-green-500 rounded-lg text-white font-semibold hover:bg-green-600"
      >
        APPLY
      </button>
    </footer>
  </div>
</div>

从上面的代码中，我们已经创建了一个容器，卡片的组件将被包含在其中。

然后我们又添加了一个容器，使我们能够在卡片内的组件周围添加空间。我们将在以后的卡片上做同样的事情。

我们使用<header> 元素添加了页眉。我们用font-semibold ，将文本变成半粗体，用text-lg ，将字体大小增加到18px，用pb-5 ，在页眉的底部增加空间，如下图所示。

First Card Components

在页眉之后，我们用<p> 标签添加了一些文字。我们用text-gray-500 ，使文本颜色为灰色，并用px-4 ，在文本的左边和右边增加了空间。

对于页脚，我们使用了元素<footer> ，然后添加了两个按钮供用户互动。

对于页脚，我们用类text-center ，使按钮居中，类space-x-5 ，在两个按钮之间增加了空间。

这就是我们为按钮添加的类的作用。

  • 为了增加按钮的宽度和高度，我们使用了py-2 和px-4 。
  • 我们通过使用mt-5.在顶部边缘增加了空间。
  • rounded-lg 使按钮的边缘看起来更圆滑。
  • hover:bg-green-500 添加一个悬停效果，将背景颜色改为绿色。
  • border-green-500 在按钮周围添加了一个绿色的边框。

这就是第一张卡片的全部内容。我们已经使用了我上面解释过的大部分类。我将在随后的卡片中只解释上面没有使用的类。

建立一个菜单组件卡

如前所述，我们已经以卡片的形式创建了一个菜单组件。卡片包含用户可以交互的链接（菜单项）。

菜单卡的代码如下所示。

<div class="rounded-lg shadow-xl bg-white ">
    <div class="items-center justify-center">
        <!--Card Header-->
        <header class="font-semibold text-sm py-3 px-4">
            Menu Items
        </header>
        <a href="" class="text-gray-500 p-3 flex  hover:bg-green-100 hover:text-green-500">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="roustroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></patsvg>
            Menu Item 1
        </a>
        <a href="" class="text-gray-500 p-3 flex hover:bg-green-100 hover:text-green-500">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="roustroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 02h-5l-5 5v-5z"></path></svg>
            Menu Item 2
        </a>
        <a href="" class="text-gray-500 p-3 flex hover:bg-green-100 hover:text-green-500"><svg class="w-6 h-6" fill="none" stroke="currentColviewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.822 0 010 2.828l-8.486 8.485M7 17h.01"></path></svg>
            Menu Item 3
        </a>
        <a href="" class="text-gray-500 p-3 flex hover:bg-green-100 hover:text-green-500"><svg class="w-6 h-6" fill="none" stroke="currentColviewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>
            Menu Item 4
        </a>
</div>

我们从一个包含<div> 。我们使用<header> ，给它一个标题Menu Items ，如上所示。

<a> 标签被用来为我们的菜单项目创建链接。

我们还为我们的菜单项添加了SVG图标。每个<a> 标签中的flex 类被用来使图标和文本垂直对齐。

我们在所有的菜单项之间添加了一个12px 的padding，以增加类p-3 的空间。填充是用来增加每个项目的可点击空间。

最后，我们添加了一个悬停效果，将背景颜色和文字变为绿色。

建立一个广告卡

我们现在将创建第三个卡片。这张卡将在第一张和第二张卡的旁边。这就是我们要创建的东西。

Advertisement Card

我们正在为一个产品创建一个广告卡。

我们将在卡片的顶部添加产品的图片，并在其下面添加其他信息，如下图所示。

<div class="w-1/4 rounded-lg shadow-xl bg-white">
  <img
    src="./img/pexels-antonio-dillard-4462781.jpg"
    alt=""
    class="rounded-t-lg h-60 w-full object-cover"
  />
  <!--Card Header-->
  <header class=" text-xl font-extrabold p-4">Card Component</header>
  <div class="px-5">
    <p class="text-gray-500 px-4">
      Use card components to easily show blog posts, merchandise, functions,
      items and more.
    </p>
  </div>
  <!--Card Footer-->
  <footer class="text-right py-3 px-8 text-gray-500">
    <button
      class="py-2 px-4 mt-5 bg-green-500 rounded-lg text-white font-semibold hover:bg-green-600"
    >
      GET STARTED
    </button>
  </footer>
</div>

从上面的片段中，我们像以前那样创建了一个包含<div> 。然后我们添加了一个图像文件。

为了让图片完美地融入容器中，我们添加了一个高度类h-60 ，使图片在容器中占据240px的高度。

由于类w-full ，它将占据容器的全部宽度。

我们希望保持图像的原始尺寸，但也希望它能融入容器中。为了达到这个目的，我们添加了类，object-cover 。

我们通过使用类rounded-t-lg ，使图片的顶部部分变圆。

然后，对于标题，我们用类font-extrabold ，使文本超粗，并使用padding类p-4 ，在文本周围增加空间。

在标题之后，我们用<p> 标签添加了一段文字，如上面的代码所示。

最后，对于页脚，我们创建了一个按钮；它位于容器的右侧。这是通过使用类来实现的，text-right 。

为了使我们的按钮不至于太靠右，我们将使用填充类py-3 和px-8 添加一些空间。我们所使用的类与我们之前使用的相同。

建立一个简介卡

我们的最后一个卡片是一个简介卡片。它包含了一个用户的信息，如他们的名字、个人照片和技能。我们将创建一个看起来像这样的卡片。

Profile card

我们的简介卡的代码如下所示。

<div class="w-1/4 rounded-lg shadow-xl bg-white p-10">
  <img
    src="./img/pexels-christina-morillo-1181690.jpg"
    alt=""
    class="rounded-full p-4 h-40 mx-auto"
  />
  <!--Card Header-->
  <header class=" text-2xl font-extrabold py-4 px-4 text-center">
    Christina Morillo
  </header>
  <div>
    <ul class="text-gray-500 text-center font-semibold">
      <li>Web Designer</li>
      <li>UX/UI Designer</li>
      <li>Database Administrator</li>
    </ul>
  </div>
  <!--Card Footer-->
  <footer class="text-center py-3 px-8 text-gray-500">
    <button
      class="py-2 px-4 mt-5 bg-green-500 rounded-lg text-white font-semibold hover:bg-green-600"
    >
      FOLLOW
    </button>
  </footer>
</div>

首先，我们创建了一个容器，并添加了一个图像文件，这将是我们的个人资料图片。我们将使用类rounded-full ，使其成为一个完整的圆形。

mx-auto 将图像放在容器的中心。

对于我们的标题，我们添加了个人资料的名称，我们将文本设置为extrabold，字体大小为24px，并使用类text-center ，将其置于容器的中心。

对于个人资料的技能，我们使用<ul> ，并使用text-center 将其居中。

最后，对于页脚，我们使用与之前相同的类添加了一个FOLLOW 按钮，并使用text-center 类将其居中。

总结

在本教程中，我们已经经历了创建不同卡片组件的步骤，这些组件可以在网页中清楚地显示用户资料、产品广告，甚至是博客文章。

在你的网页中使用卡片组件是很明智的。

avatar
文章
阅读
粉丝