資料結構
網路
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.tw/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 次瀏覽
