Rumah >hujung hadapan web >html tutorial >Bagaimana untuk membina komponen kad menggunakan Tailwind CSS?
Bagaimana untuk membina komponen kad menggunakan Tailwind CSS?
- WBOYke hadapan
- 2023-08-20 11:41:161206semak imbas
Komponen kad dalam Tailwind CSS ialah konsep penting dalam reka bentuk web, terutamanya sesuai untuk tapak web e-dagang, laman web blog, dsb. Tailwind CSS terkenal kerana membina laman web yang menarik. Artikel ini akan menerangkan cara membina komponen kad menggunakan Tailwind CSS.
Cara menambah satu komponen kad dalam Tailwind CSS
Tailwind CSS menyediakan kami cara yang sangat mudah untuk menambah komponen kad. Komponen kad juga boleh mengandungi sub-komponen lain seperti video, audio, imej, dsb. Selain itu, kami boleh menyesuaikan reka bentuk keseluruhan dengan mudah menggunakan sifat yang tersedia. Anda juga boleh menggunakan Tailwind CSS untuk menambah animasi dan kesan tuding pada komponen kad.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com/"></script>
<title>Tutorials Point</title>
</head>
<body class="bg-gray-300 text-gray-600">
<section class="py-12 px-5 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/3">
<div class="bg-white bg-opacity-75 rounded-lg p-8 overflow-hidden text-center relative">
<h2 class="text-xs title-font font-medium text-gray-700 mb-
1">TUTORIALS POINT</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-
900 mb-3">Elegant and Concise Tutorials</h1>
<p class="mb-3 text-justify">
Unlock the potential of limitless learning with Tutorials Point!
Our platform offers a wide range of tutorials, covering subjects
such as programming, web development, data science, and more. Our
step-by-step guides and interactive learning experiences will help
you master the concepts and skills needed to succeed in your
field. Enhance your knowledge and boost your career with Tutorials
Point today!
</p>
<img class="w-full object-cover object-center" src="https://www.tutorialspoint.com/images/logo.png"
</div>
</div>
</div>
</section>
</body>
</html>
Terjemahan bahasa Cina bagi Penjelasan
ialah:Penjelasan
Bahagian ini termasuk: ➔ Pautan ke perpustakaan CSS Tailwind, rangka kerja CSS utiliti yang popular untuk membina tapak web yang pantas dan responsif.
Dokumen HTML mentakrifkan bahagian yang mengandungi tajuk, sari kata, beberapa teks deskriptif dan kotak dengan imej. Bahagian 93f0f5c25f18dab9d176bd4f6de5d30e termasuk 6018f64a9976cd2b3aaf586ecb9b271f dan 855348821b2e8f2cc4b633bf98f064df Bahagian 6c04bd5ca3fcae76e30b72ad730ca86d mempunyai kelas yang menetapkan warna latar belakang dan warna teks.
Pustaka CSS Tailwind menambah gaya pada elemen HTML dengan cara yang mudah dan elegan. Kotak itu mempunyai jidar bulat, pelapik, ketelusan dan kandungannya ditengahkan. Imej ditetapkan kepada lebar penuh dan meliputi kotak, sambil mengekalkan nisbah bidangnya.
Bagaimana untuk menambah berbilang kad?
Anda mungkin perasan bahawa halaman web popular seperti blog, e-dagang, dsb. mengandungi berbilang komponen kad. Mencapai kesan yang sama dalam Tailwind CSS adalah sangat mudah. Kami hanya perlu menulis kod kad asas yang sama beberapa kali. Berdasarkan parameter yang kami lalui, seperti lebar, tinggi, dll., penyemak imbas akan meletakkan kad ini.
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com/"></script>
<title>Awesome Card</title>
</head>
<body class="bg-gray-300 text-gray-600">
<section class="py-12 px-5 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/3">
<div class="bg-white rounded-lg p-8 shadow-lg overflow-hidden">
<img class="w-full object-cover object-center"
src="https://imgnew.outlookindia.com/uploadimage/library/16_9/16_9_5/IMAGE_1651057728.jpeg"
<h2 class="text-xs title-font font-medium text-gray-700 mb-1 mt-5">ASUS LAPTOP</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-
900 mb-3">GAMING LAPTOP</h1>
<p class="mb-3 text-justify">
ASUS laptops are designed for versatility, with features like
sleek and lightweight designs, powerful performance, and
innovative technologies. Whether you're a gamer, creative
professional, or just need a reliable device for everyday use,
ASUS has you covered.
</p>
<button class="bg-indigo-500 text-white py-2 px-4 roundedfull"> Get Started</button>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="bg-white rounded-lg p-8 shadow-lg overflow-hidden">
<img class="w-full object-cover object-center"src="https://images.indianexpress.com/2022/08/HP_Laptop_LEAD.jpg"
<h2 class="text-xs title-font font-medium text-gray-700 mb-1 mt-5">HP LAPTOP</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">ULTRABOOK</h1>
<p class="mb-3 text-justify">
HP offers a wide range of laptops to choose from, designed to suit
every need and budget. From lightweight and portable devices perfect
for on-the-go computing, to powerful machines capable of handling
demanding tasks, HP has got you covered.
</p>
<button class="bg-indigo-500 text-white py-2 px-4 roundedfull">Get Started</button>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="bg-white rounded-lg p-8 shadow-lg overflow-hidden">
<img class="w-full object-cover object-center"src="https://cdn.mos.cms.futurecdn.net/PZtqJj8yTeTYnw3WMjdomF.jpg"
<h2 class="text-xs title-font font-medium text-gray-700 mb-1 mt-5">DELL LAPTOP</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">ULTRABOOK</h1>
<p class="mb-3 text-justify">
Dell has a wide range of laptops to choose from, making it easy to
find one that suits your needs and budget.From entry-level
machines perfect for basic computing, to high-end gaming laptops,
Dell has something for everyone.</p>
<button class="bg-indigo-500 text-white py-2 px-4 roundedfull">Get Started</button>
</div>
</div>
</div>
</section>
</body>
</html>
Kesimpulan
Artikel ini memperkenalkan cara membuat komponen kad menggunakan CSS Tailwind. Kami telah menggunakan elemen yang berbeza dalam komponen kad seperti teks, tajuk, komponen imej dll. Kami amat menggalakkan pembaca untuk mencuba mengubah sifat dan nilai serta memerhatikan perubahan tersebut.
Atas ialah kandungan terperinci Bagaimana untuk membina komponen kad menggunakan Tailwind CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!