数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究现代 CSS 卡片
如今，在网站上创建卡片对于展示各种数据非常重要。例如，在 TutorialsPoint 网站的首页上，您会以卡片格式找到不同的课程，当您点击卡片时，它会将您重定向到该课程的特定页面。
此外，如果您访问任何电子商务商店，例如亚马逊或 Flipkart，它们会以卡片格式显示产品。创建卡片的主要好处是，我们可以显示产品的简要信息，包括图片，并在产品页面上提供完整信息。
在本教程中，我们将学习仅使用 HTML 和 CSS 创建不同的卡片。
示例 1（基本 CSS 卡片）
在下面的示例中，我们创建了包含单个图像的“card” div 元素和“card-content” div 元素。“card-content” div 元素包含文本信息。
在 CSS 中，我们为卡片元素设置了固定尺寸。此外，我们还提供了诸如背景颜色、圆角和边框等样式。当用户将鼠标悬停在卡片上时，我们还会在卡片上应用阴影效果。
此外，我们为图像固定了尺寸，并为顶部角设置了圆角。我们还设置了文本内容的字体大小。在输出中，用户可以观察到生成的卡片。
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
width: 18rem;
background-color: #fff;
}
.card:hover { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);}
.card>img {
border-radius: 5px 5px 0 0;
height: 150px;
width: 100%;
object-fit: contain;
}
.card-content { padding: 20px;}
.card h3 { font-size: 1.4rem; margin-top: 0;}
.card p { font-size: 1rem; margin-bottom: 10px;
}
.card a {
padding: 10px 20px;
background-color: #222;
border-radius: 10px;
color: white;
text-align: center;
display: inline-block;
text-decoration: none;
transition: background-color 0.4s ease-in-out;
}
.card a:hover { background-color: #4b4a4a;}
</style>
</head>
<body>
<h2> Creating the <i> basic cards </i> using the CSS </h2>
<div class = "card">
<img src = "https://tutorialspoint.com/static/images/logo.png?v2" alt = "Logo">
<div class = "card-content">
<h3> Python </h3>
<p> Python course by Shubham Vora </p>
<a href = "#"> Join now </a>
</div>
</div>
</body>
</html>
示例 2
在下面的示例中，我们创建了一个类似于第一个示例的卡片。在这里，我们为“card-image” div 元素设置了背景图像。我们还通过从“Picsum”网站获取来设置随机图像。在这个卡片中，我们没有像第一个示例那样添加“立即加入”锚标记。
<html>
<head>
<style>
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.card-image {
height: 200px;
background-image: url("https://picsum.photos/300/200");
background-size: cover;
border-radius: 10px 10px 0 0;
}
.card-content { padding: 20px;}
.card-title {
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 10px 0;
}
.card-text { font-size: 1rem; margin: 0; }
</style>
</head>
<body>
<h2> Creating the <i> basic cards </i> using the CSS. </h2>
<div class = "card">
<div class = "card-image"> </div>
<div class = "card-content">
<h2 class = "card-title"> Random Image</h2>
<p class = "card-text"> This is an random image description. </p>
</div>
</div>
</body>
</html>
示例 3
在下面的示例中，我们在卡片上添加了悬停效果以显示其他信息。
在这里，我们首先创建了卡片容器以创建普通卡片，并使用带有“position: relative”的 CSS 对其进行样式设置。我们在卡片容器内添加了“card-first”和“card-second” div 元素。“card-first” div 元素包含卡片上的信息，“card-second” div 元素包含在用户将鼠标悬停在卡片上时显示的信息。
此外，我们为 CSS 的“card-first” div 元素设置了尺寸。我们还在 CSS 中为“card-second” div 元素设置了尺寸，并使用“transform: translate(100%)” CSS 属性隐藏了第二部分。当用户将鼠标悬停在卡片元素上时，我们使用“transform: translateX(-100%)” CSS 属性显示卡片的第二部分。
<html>
<head>
<style>
.card {
position: relative;
width: 300px;
height: 200px;
background-color: rgb(64, 64, 247);
color: white;
border-radius: 10px;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.card-first {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
font-size: 1.7rem;
transition: transform 0.5s ease-in-out;
}
.card-second {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 20px;
transform: translateX(100%);
transition: transform 0.5s ease-in-out;
}
.card:hover .card-first { transform: translateX(-100%);}
.card:hover .card-second { transform: translateX(0%); }
</style>
</head>
<body>
<h2> Creating the <i> hover effect on the card </i> to show additional information. </h2>
<div class = "card">
<div class = "card-first">
<h3> Samsung s22 </h3>
<p> 1,01,000 INR </p>
</div>
<div class = "card-second">
<p> 6.4 inch display </p>
<p> 8 GB RAM </p>
<p> 128 GB Storage </p>
<p> 64 MP Camera </p>
</div>
</div>
</body>
</html>
示例 4
在下面的示例中，我们创建了“parent” div 元素。之后，我们添加了多个包含图像和卡片描述的卡片元素。
在 CSS 中，我们使用 clamp() 函数来设置卡片的宽度。clamp() 函数采用三个参数。第一个是最小值，第二个是以百分比表示的值，第三个是最大值。在我们的例子中，如果屏幕尺寸的 20% 在 300 到 500 像素之间，则卡片宽度将为 20%。否则，它将是 300 像素或 500 像素。
此外，我们将“parent”容器设置为弹性盒子以正确显示所有卡片。
<html>
<head>
<style>
.parent {
padding: 30px 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
position: relative;
margin: 20px;
width: clamp(230px, 20%, 500px);
height: 250px;
background-color: green;
color: white;
border-radius: 10px;
transition: all 0.3s ease;
}
.card img {
width: 100%;
height: 150px;
border-radius: 10px 10px 0 0;
object-fit: cover;
}
.card-text {
padding: 20px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
transition: all 0.3s ease;
}
.card-text h3 { font-size: 24px; margin-bottom: 10px;}
.card-text p { font-size: 16px; margin-bottom: 0;}
</style>
</head>
<body>
<h3> Creating the <i> card with clamp() function </i> to manage card dimensions according to the screen dimensions </h3>
<div class = "parent">
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2> Card 1 </h2>
<p> This is a card description. </p>
</div>
</div>
<div class = "card">
<img src = "https://picsum.photos/300/200" alt = "Random image">
<div class = "card-text">
<h2> Card 2 </h2>
<p> This is a card description. </p>
</div>
</div>
</div>
</body>
</html>
用户学习了如何使用 HTML 和 CSS 创建现代卡片。在最初的两个示例中，我们创建了基本卡片；在第三个示例中，我们创建了带有悬停效果的卡片。此外，我们学习了如何使用 clamp() 函数根据设备的屏幕尺寸处理卡片大小。
622 次浏览
