如今，大多数现代网站和Web应用程序都有产品卡。产品卡使开发人员能够在吸引用户的部分中整洁地提供一些相关的信息。您可以添加一些很酷的动画，以供出色的用户体验。

今天，我们将使用HTML和CSS创建这样的卡片，这是我们将创建的
.

首先，我们将创建一个父容器（适当，一个divð），该容器将嵌套我们的三个产品卡中的所有产品，以便我们可以使用Flex盒并并排放置产品卡。请记住，您可以命名您想要的任何名称，但始终给它一个有意义的名字，至少可以理解一个名字。

现在我们必须创建卡本身，我们将从第一个开始。
让我们为卡本身创建另一个Div，该Div将带有另一个DIV，这将使我们能够轻松涂抹填充物，不用担心我们不会创建Div Soupð。将我们的图像放入DIV或容器中通常很不错，以便我们可以给我们的图像宽度100％。

之后，为了清楚起见，我们还需要另一个DIV才能使我们的文本内容。在此DIV内，我们将有一个H4，该H4将包含文本“ fragment” <h4>Fragment</h4>。
之后，我们将创建一个p标签并给它一个类名称，它将包含文本“ 0.080 eth 1 of 56”。这是一个技巧，如果您看我们的设计，您会注意到我们的0.080 ETH与56个中的1个颜色不同吗？为了使我们轻松实现这一目标，我们必须将0.080 ETH放在跨度标签中，以便我们可以给它一些不同的颜色并给出其他文本，而不是在跨度标签内部的其他颜色，它是白色的。
我们将在第二个P标签上使用相同的技巧，并给它一个不同的类名称，以便于造型。这是我们到目前为止所做的

样式（尽管我们稍后仍会添加一些HTML）

我们必须删除HTML随附的默认样式以进行平滑体验。这是它的代码*{
padding:0;
margin:0;
box-sizing:border-box;
}
现在，我们将不得不给我们的卡本身一个宽度，您可以选择自己喜欢的任何宽度，但我将持续30次REM。不用担心，您仍然可以使用常规的PX，您只需将此30 REM除以16即可以获取像素的值。我喜欢使用REM的原因有些充分的理由（不用担心，我稍后会写）。我会给这张卡片的背景颜色的红色，以便我可以轻松地看到自己在做什么（稍后会删除）。
将使我们的形象宽度为100％。

让我们在浏览器上预览我们的工作
哇，我们要到达那里。
现在，将在H4标签的顶部和底部添加一些填充物，我们还将将字体大小提高到25px，并将其颜色更改为白色。然后，我们将在我们的第一个p标签中添加一些1REM的填充底部，字体尺寸为20px和白色颜色。现在，我们将必须在第一个p标签中给出跨度元素的颜色不同（颜色代码在代码中），并给出0.5REM的边缘左。让我们给我们的第二个P标签的字体大小为20px和不同的颜色（检查颜色的代码）。现在，我们将不得不在第二个p标签内给出跨度标签的白色，边缘为0.5REM
。如果您检查得很好，您会看到我将卡的背景颜色更改为其他东西。现在让我们预览我们的作品
，哇，我们到达那里。
让我们在第二个p标签下创建一个人力资源标签，我们将给它一个边框，颜色和1REM的边缘顶部。这将创建您在设计上看到的白色水平线。这是HTML代码
这里也是CSS
，现在让我们预览我们的作品
很好ð？

现在让我们创建卡的最后一部分。我们将创建一个父容器或DIV，该容器将嵌套其他两个Divs。第一个DIV将具有一个P标签，该标签将带有一个诸如ICON之类的时钟（我们将从fontawesome.com获得），6小时。然后，我们将将AGO文本放入一个跨度中，以便我们可以给它一些边距。我们还将像图标一样给我们的时钟。

我们也将在另一个Div中创建一个P标签，我们将将心脏图标放在跨度标签中，然后给它一个余量，然后是我们的674。这是代码
，这是结果

现在让我们为最后一部分设计。我们将向筑巢的其他两个div筑巢的父容器提供一些填充顶部，以便我们可以在水平线和div本身之间创建一些空间。我们还将使其成为一个弯曲的容器，在内部其他两个divs并在中心对齐，以便它们可以在同一条线上。
然后，我们将给出两个单独的divs内部的p标签，白色字体大小为20px。您还记得我们放入跨度标签的时钟图标吗？我们将给它一些余量，还要给我们的AGO，它在另一个跨度标签中剩下一些余量。
您还记得我们在另一个P标签中放置的心脏图标吗？我们将给它一些余地和粉红色。这应该是您的结果
这应该是您的CSS
.
现在，让我们复制我们的卡div，是的，我们将所有卡信息嵌套在其中。将其粘贴在同一产品卡片中两次，因为我们将使它们成为flex物品。更改您复制和粘贴两张卡的OMG的SRC，以便它们可以具有不同的图像。这是您的HTML应该看起来像
，这应该是您目前的结果


我们将使我们的产品卡片一个弹性，给它一个圆柱间隙，一些填充物和黑色背景颜色。这是CSS代码
，这应该是您的结果
。如果您可以注意到，我更改了最后一个图像，因为它的大小与其他图像不一样，因此您的图像具有相同大小以避免问题的图像。

就是大家，我希望您从中学到了一些东西。如果您有任何疑问，请发表评论，我很乐意回答您。

快乐的编码ðð»！