Membina Reka Letak Kad Responsif dengan HTML dan CSS Flexbox-tutorial css-php.cn

Membina Reka Letak Kad Responsif dengan HTML dan CSS Flexbox

Susan Sarandon

Lepaskan： 2024-12-31 06:29:13

asal

431 orang telah melayarinya

Dalam artikel kami sebelum ini, kami telah meneroka kepentingan HTML berstruktur dan cara CSS Flexbox memudahkan reka letak web. Artikel ini membina konsep tersebut dengan menggabungkannya untuk mencipta sesuatu yang praktikal, susun atur kad responsif. Fikirkan ia sebagai satu cara untuk mengukuhkan semua yang telah kami pelajari setakat ini, sambil meningkatkan kemahiran pembangunan web anda.

Apabila membina reka letak web, komponen kad ada di mana-mana, penyenaraian produk, catatan blog dan banyak lagi. Kad yang direka dengan baik berfungsi dan menarik secara visual, dan reka bentuk responsifnya memastikan ia kelihatan hebat pada mana-mana peranti. Dalam artikel ini, kami akan membincangkan cara membina reka letak kad responsif langkah demi langkah menggunakan HTML semantik dan CSS Flexbox.

Apa yang akan kami bina

Kami akan membuat reka letak kad responsif yang:

1. Memaparkan berbilang kad bersebelahan pada skrin yang lebih besar.

2. Susun kad secara menegak pada skrin yang lebih kecil.

3. Menggunakan HTML semantik untuk kebolehaksesan dan kebolehselenggaraan.

4. Menunjukkan kotak lentur untuk penjajaran dan jarak.

LANGKAH 1: Tulis HTML

Mari mulakan dengan mencipta struktur untuk kad kami. Kami akan menggunakan HTML semantik untuk memastikan kandungan bermakna dan boleh diakses.

<body>
 <section>



<h3>
  
  
  <em>Key Points</em>:
</h3>

Salin selepas log masuk

Use section for the container, as it groups related content.
Each card is an article, signifying that it's a self-contained piece of content.
The img, header, and footer are semantically grouped to enhance readability and accessibility.

STEP 2: Add Basic Styles

Let's define some basic styles;

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }


  body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    text-align: center;


  }
  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding: 1rem;

  }
  .card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
    background-color: #fff;
  }
  .card-image {
    width: 100%;
    border-radius: 8px;
  }
  .card-header h2 {
    font-size: 1.5rem;
    color: black;
    font-weight: bold;
  }
  .card-footer {
    display: flex;
    justify-content: space-between;
  }
  button {
    background-color: palevioletred;
    color: black;
    font-weight: bold;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: plum;

  }

Salin selepas log masuk

Isi Penting:

Bekas .kad menggunakan flex-wrap: balut untuk membenarkan kad disusun apabila saiz skrin mengecil.
Setiap .kad digayakan dengan reka letak lajur yang fleksibel dan jarak yang sesuai antara elemen.

LANGKAH 3: Mari jadikan Responsif

Kini, tiba masanya untuk memastikan reka letak kad kelihatan hebat pada semua saiz skrin.

 @media (max-width: 768px) {
    .card-container {
      flex-direction: column;
      align-items: center;
    }
  }

Salin selepas log masuk

Isi Penting:

Untuk skrin yang lebih kecil daripada 768px, .card-container bertukar daripada reka letak baris kepada reka letak lajur.
Ini memastikan kad disusun secara menegak, menjadikannya lebih mudah dibaca pada peranti mudah alih.

PENAMPILAN AKHIR

Pada skrin yang lebih besar : kad akan dijajarkan sebelah-menyebelah dengan ruang di antaranya.?

Building Responsive Card Layouts with HTML and CSS Flexbox

Pada skrin yang lebih kecil : kad akan disusun di atas satu sama lain untuk reka letak yang bersih. ?

Building Responsive Card Layouts with HTML and CSS Flexbox

Membungkus

Untuk menyelesaikan perkara, berikut ialah perkara yang telah kami pelajari:

HTML Semantik: Tulis kod yang bersih, boleh diakses dan boleh diselenggara.
Asas Flexbox: Gunakan Flexbox untuk menjajarkan dan mengosongkan elemen dengan mudah.
Reka Bentuk Responsif: Gunakan pertanyaan media untuk membuat reka letak menyesuaikan diri dengan peranti yang berbeza.

Apa Seterusnya?

Ambil contoh ini dan jadikan ia sendiri. Eksperimen dengan reka bentuk kad yang berbeza, hanya bermain-main dengannya kerana lebih banyak anda berlatih, lebih baik anda akan dapat.

Sehingga lain kali, penulis kejiranan anda yang mesra, MJ. ? Selamat tinggal!!!

Atas ialah kandungan terperinci Membina Reka Letak Kad Responsif dengan HTML dan CSS Flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!