Cara membuat susun atur paparan galeri imej responsif menggunakan HTML dan CSS

Cara membuat susun atur paparan galeri imej responsif menggunakan HTML dan CSS

Dalam era Internet hari ini, paparan galeri imej adalah ciri biasa dalam reka bentuk web Susun atur boleh memaparkan pelbagai gambar dan karya imej. Untuk membolehkan pengguna mendapat pengalaman menyemak imbas yang baik pada peranti yang berbeza, reka bentuk responsif menjadi semakin penting. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk mencipta reka letak paparan galeri imej responsif dan memberikan contoh kod khusus.

Langkah 1: Cipta struktur HTML asas

Pertama, kita perlu mencipta struktur HTML asas. Kami akan menggunakan senarai tidak tertib (

) untuk mengandungi semua elemen imej dan menggunakan item senarai (
• ) untuk membalut setiap imej. Dalam setiap item senarai, kami akan menggunakan teg

  <div class="gallery">
    <ul>
      <li><img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1"></li>
      <li><img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2"></li>
      <li><img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3"></li>
      <!-- 添加更多图片 -->
    </ul>
  </div>

  Langkah 2: Gunakan Gaya CSS

  Seterusnya, kita perlu menambah beberapa gaya CSS pada galeri imej untuk mencipta galeri dengan reka letak responsif. Pertama, kita perlu menentukan ketinggian dan lebar galeri. Untuk mencapai reka bentuk responsif, kami akan menggunakan peratusan untuk menentukan lebar.

  .gallery {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .gallery ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .gallery li {
    display: inline-block;
    width: 30%;
    padding: 10px;
    box-sizing: border-box;
  }
  
  .gallery img {
    width: 100%;
    height: auto;
  }

  Dengan gaya CSS di atas, kami mentakrifkan lebar bekas galeri ialah 100%, tetapi lebar maksimum ialah 1200px. Setiap item senarai (iaitu imej) mempunyai lebar 30% dan mempunyai padding 10px.

  Langkah 3: Laksanakan reka bentuk responsif

  Untuk melaksanakan reka bentuk responsif, kami boleh menggunakan pertanyaan media untuk menyesuaikan diri dengan saiz skrin yang berbeza. Untuk menjadikan reka letak galeri dipaparkan lebih baik pada peranti skrin kecil, kita boleh melakukan ini dengan menukar lebar setiap item senarai.

  @media screen and (max-width: 768px) {
    .gallery li {
      width: 50%;
    }
  }
  
  @media screen and (max-width: 480px) {
    .gallery li {
      width: 100%;
    }
  }

  Kod CSS di atas menggunakan pertanyaan media untuk menukar lebar item senarai pada peranti skrin kecil masing-masing kepada 50% dan 100% untuk menyesuaikan diri dengan saiz skrin yang berbeza.

  Melalui langkah di atas, kami berjaya mencipta reka letak paparan galeri imej responsif. Reka letak ini boleh menyesuaikan diri dengan saiz skrin yang berbeza pada peranti yang berbeza dan memberikan pengalaman pengguna yang baik.

  Ringkasan

  Artikel ini memperkenalkan cara mencipta reka letak paparan galeri imej responsif menggunakan HTML dan CSS. Dengan menyediakan struktur HTML dan menggunakan gaya CSS, kami boleh mencapai reka bentuk responsif yang menyesuaikan dengan saiz skrin yang berbeza. Saya harap artikel ini membantu anda memahami reka bentuk responsif dan membuat reka letak galeri imej.

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