◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
现代CSS卡片
ID:13100 / 打印
如今，在网站上创建卡片非常重要，可以在网站上展示各种数据。例如，在TutorialsPoint网站的首页上，您会发现以卡片格式展示不同的课程，当您点击卡片时，它会将您重定向到该课程的特定页面。
此外，如果您访问任何电子商务商店，如亚马逊或Flipkart，它们会以卡片格式显示产品。创建卡片的主要好处是我们可以在图片上显示产品的简短信息，并在产品页面上提供完整信息。
在本教程中，我们将学习仅使用HTML和CSS创建不同的卡片。
Example 1 (Basic CSS Cards)
In the example below, we created the ‘card’ div element containing the single image and the ‘card-content’ div element. The ‘card-content’ div element contains the text information.
立即学习“前端免费学习笔记（深入）”；
In CSS, we set the fixed dimensions for the card element. Also, we have given styles such as background color, border radius, and border, etc. Also, we apply the box-shadow effect on the card when users hover over the card.
Furthermore, we fixed the dimensions for the image and set the border radius for the top corners. Also, we set the font size of the text content. In the output, users can observe the resultant card.
<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> Example 2
的中文翻译为：示例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> Example 3
在下面的示例中，我们在卡片上添加了悬停效果，以显示额外的信息。
Here, we created the card container first to create a normal card and styled it using the CSS with ‘position: relative.’ We added the ‘card-first’ and ‘card-second’ div elements inside the card container. The ‘card-first’ div element contains the information on the card, and the ‘card-second’ div element contains the information to show whenever users hover over the card.
Furthermore, we set the dimensions for CSS's ‘card-first’ div element. Also, we set dimensions for the ‘card-second’ div element in the CSS and used the ‘transform: translate(100%)’ CSS property to hide the second part. When users hover over the card element, we use the ‘transform: translateX(-100%)’ CSS property to show the second part of the card.
<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> Example 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> Users learned to create modern cards using HTML and CSS. In the first two examples, we created the basic cards; in the third example, we created the cards with the hover effect. Also, we learned to use the clamp() function to handle the card size according to the device’s screen dimensions.
