极客笔记现代CSS卡片
如今，在网站上创建卡片非常重要，可以在网站上展示各种数据。例如，在TutorialsPoint网站的首页上，您会发现以卡片格式展示不同的课程，当您点击卡片时，它会将您重定向到课程的特定页面。
此外，如果您进入亚马逊或Flipkart等任何电子商务商店，它们会以卡片格式展示产品。创建卡片的主要优点是可以通过图像显示产品的简要信息，并在产品页上显示完整信息。
在本教程中，我们将学习如何使用仅使用HTML和CSS来创建不同的卡片。
示例1（基本CSS卡片）
在下面的示例中，我们创建了包含单个图像和’card-content’ div元素的’card’ 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://www.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
在下面的示例中，我们在卡片上添加了悬停效果以显示额外的信息。
在这里，我们首先创建了卡片容器，创建了一个普通的卡片，并使用CSS进行了样式设置，其中’position: relative’。我们在卡片容器内添加了’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”容器设置为Flexbox以正确显示所有的卡片。
<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()函数根据设备屏幕尺寸处理卡片大小。