Bagaimana untuk membina komponen kad menggunakan Tailwind CSS?-html tutorial-php.cn

Bagaimana untuk membina komponen kad menggunakan Tailwind CSS?

WBOY

Lepaskan： 2023-08-20 11:41:16

ke hadapan

1126 orang telah melayarinya

如何使用Tailwind CSS构建一个卡片组件？

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 bagi

Contoh

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>

Salin selepas log masuk

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 termasuk dan Bahagian 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 bagi

Contoh

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>

Salin selepas log masuk

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!