Rumah > Artikel > hujung hadapan web > Kad CSS Moden
Kad CSS Moden
- 王林ke hadapan
- 2023-08-23 13:25:07963semak imbas
Kini, sangat penting untuk membuat kad di laman web untuk memaparkan pelbagai data di laman web. Sebagai contoh, pada halaman utama laman web TutorialsPoint, anda akan menemui kursus berbeza yang dibentangkan dalam format kad, dan apabila anda mengklik pada kad, ia akan mengubah hala anda ke halaman khusus untuk kursus tersebut.
Selain itu, jika anda melawat mana-mana kedai e-dagang seperti Amazon atau Flipkart, mereka memaparkan produk dalam format kad. Faedah utama mencipta kad ialah kita boleh memaparkan maklumat ringkas tentang produk pada imej dan memberikan maklumat penuh pada halaman produk.
Dalam tutorial ini, kita akan belajar membuat kad yang berbeza menggunakan HTML dan CSS sahaja.
Contoh 1 (Kad CSS Asas)
Dalam contoh di bawah, kami mencipta elemen div 'kad' yang mengandungi imej tunggal dan elemen div 'kad-kandungan' Elemen div 'kad-kandungan' mengandungi maklumat teks.
Dalam CSS, kami menetapkan dimensi tetap untuk elemen kad Selain itu, kami telah memberikan gaya seperti warna latar belakang, jejari jidar dan jidar, dsb. Selain itu, kami menggunakan kesan bayangan kotak pada kad apabila pengguna menuding ke atas. kad.
Selain itu, kami menetapkan dimensi untuk imej dan menetapkan jejari sempadan untuk sudut atas Selain itu, kami menetapkan saiz fon kandungan teks Dalam output, pengguna boleh memerhati kad yang terhasil
<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>
Terjemahan bahasa Cina bagi Contoh 2ialah:
Contoh 2Kami telah mencipta kad yang serupa dengan contoh pertama dalam contoh di bawah. Di sini, kami menetapkan imej latar belakang untuk elemen div "imej kad". Pada masa yang sama, kami menetapkan gambar dengan mendapatkan gambar rawak dari laman web "Picsum". Dalam kad ini, kami belum menambah teg utama "Sertai Sekarang" seperti yang kami lakukan dalam contoh pertama.
<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>
Contoh 3Dalam contoh di bawah, kami telah menambahkan kesan tuding pada kad untuk memaparkan maklumat tambahan.
Di sini, kami mencipta bekas kad terlebih dahulu untuk mencipta kad biasa dan menggayakannya menggunakan CSS dengan 'kedudukan: relatif.' Kami menambahkan elemen div 'kad-pertama' dan 'kad-kedua' di dalam bekas kad '. elemen div kad-pertama' mengandungi maklumat pada kad dan elemen div 'kad-kedua' mengandungi maklumat untuk ditunjukkan apabila pengguna menuding di atas kad.
Selain itu, kami menetapkan dimensi untuk elemen div 'card-first' CSS Selain itu, kami menetapkan dimensi untuk elemen div 'card-second' dalam CSS dan menggunakan sifat CSS 'transform: translate(100%)' untuk disembunyikan. bahagian kedua. Apabila pengguna menuding pada elemen kad, kami menggunakan sifat CSS 'transform: translateX(-100%)' untuk menunjukkan bahagian kedua kad.
<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>
Contoh 4Dalam contoh di bawah, kami telah mencipta elemen div bernama 'ibu bapa'. Selepas itu, kami menambah berbilang elemen kad yang mengandungi imej dan penerangan kad.
Dalam CSS, kami menggunakan fungsi clamp() untuk menetapkan lebar kad. Fungsi clamp() menerima tiga parameter. Yang pertama ialah nilai minimum, yang kedua ialah nilai peratusan, dan yang ketiga ialah nilai maksimum. Dalam contoh kami, jika 20% daripada saiz skrin adalah antara 300 dan 500 piksel, lebar kad ialah 20%. Jika tidak, ia akan menjadi 300 piksel atau 500 piksel.
Selain itu, kami menetapkan bekas "ibu bapa" kepada flexbox untuk memaparkan semua kad dengan betul.
<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>
Pengguna belajar membuat kad moden menggunakan HTML dan CSS Dalam dua contoh pertama, kami mencipta kad asas dalam contoh ketiga, kami juga telah belajar menggunakan fungsi pengapit(). kendalikan saiz kad mengikut dimensi skrin peranti.Atas ialah kandungan terperinci Kad CSS Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk mencipta karusel dengan bantuan CSS?Artikel seterusnya：Bagaimana untuk mencipta karusel dengan bantuan CSS?