Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS

Cara membuat reka letak dinding kad responsif menggunakan HTML dan CSS

Dalam reka bentuk web moden, reka letak responsif adalah teknologi yang sangat penting. Dengan menggunakan HTML dan CSS, kami boleh mencipta reka letak dinding kad responsif yang menyesuaikan diri dengan peranti dengan saiz skrin yang berbeza.

Berikut akan memperincikan cara membuat reka letak dinding kad responsif yang mudah menggunakan HTML dan CSS.

Bahagian HTML:

Pertama, kita perlu menyediakan struktur asas dalam fail HTML. Kita boleh mencipta kad menggunakan senarai tidak tersusun (

) dan item senarai (
• ).

  <ul class="card-wall">
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
          <h3 id="Card">Card 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
          <h3 id="Card">Card 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      <li class="card">
          <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
          <h3 id="Card">Card 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      ...
  </ul>

  Bahagian CSS:

  Kemudian, kita perlu menggayakan kad dan dinding kad. Di sini kami akan menggunakan susun atur CSS Flexbox untuk mencapai kesan responsif.

  .card-wall {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }
  
  .card {
      width: 300px;
      margin: 10px;
      background-color: #f1f1f1;
      text-align: center;
      padding: 20px;
  }
  
  .card img {
      width: 100%;
  }
  
  @media only screen and (max-width: 768px) {
      .card {
          width: 90%;
      }
  }

  Penerangan kod:

  • Kelas ".card-wall" ditetapkan kepada susun atur Flexbox supaya kad disusun dalam baris dan dijajarkan secara mendatar dan tengah .
  • Kelas ".card" menetapkan lebar, jidar, warna latar belakang, pemusatan teks dan padding kad.
  • Kelas ".card img" menetapkan lebar imej dalam kad kepada 100%.
  • Pertanyaan "@media" akan digunakan apabila lebar skrin kurang daripada 768px untuk menjadikan kad dipaparkan lebih baik pada skrin kecil.

  Menggunakan kod ini, kami boleh membuat reka letak dinding kad responsif dengan mudah. Tidak kira peranti yang digunakan, kad diubah saiz dan disusun secara automatik agar muat pada saiz skrin yang berbeza.

  Sudah tentu, ini hanya contoh mudah. Anda boleh meningkatkan reka bentuk dengan menambahkan lebih banyak kad dan menggunakan gaya CSS.

  Ringkasan:

  Dalam artikel ini, kami mencipta reka letak dinding kad responsif yang mudah menggunakan HTML dan CSS. Dengan menggunakan susun atur Flexbox dan pertanyaan media, kami boleh melaraskan reka letak dengan mudah agar sesuai dengan peranti dengan saiz skrin yang berbeza.

  Ini hanyalah asas untuk mencipta reka letak responsif menggunakan HTML dan CSS, anda boleh terus belajar dan berlatih untuk mencapai kesan reka bentuk yang lebih kompleks dan unik.

Atas ialah kandungan terperinci Cara membuat susun atur dinding kad responsif menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!