如今，在網站上建立卡片非常重要，可以在網站上展示各種資料。例如，在TutorialsPoint網站的首頁上，您會發現以卡片格式展示不同的課程，當您點擊卡片時，它會將您重定向到該課程的特定頁面。
此外，如果您造訪任何電子商務商店，例如亞馬遜或Flipkart，它們會以卡片格式顯示產品。創建卡片的主要好處是我們可以在圖片上顯示產品的簡短訊息，並在產品頁面上提供完整資訊。
在本教學中，我們將學習僅使用HTML和CSS建立不同的卡片。
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 users hso, we apply the box-shadow effect on the card提供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.
ant 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>
我們在下面的範例中建立了一個類似第一個範例的卡片。在這裡，我們為「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>
在下面的範例中，我們在卡片上添加了懸停效果，以顯示額外的資訊。
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>
在下面的範例中，我們建立了一個名為'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>
以上是現代CSS卡片的詳細內容。更多資訊請關注PHP中文網其他相關文章！
