Rumah > hujung hadapan web > html tutorial > Cara membuat susun atur paparan galeri imej responsif menggunakan HTML dan CSS

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

王林
Lepaskan: 2023-10-18 09:40:44
asal
1382 orang telah melayarinya

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 Cara membuat susun atur paparan galeri imej responsif menggunakan HTML dan CSS
    <div class="gallery">
      <ul>
        <li><img src="image1.jpg" alt="Image 1"></li>
        <li><img src="image2.jpg" alt="Image 2"></li>
        <li><img src="image3.jpg" alt="Image 3"></li>
        <!-- 添加更多图片 -->
      </ul>
    </div>
    Salin selepas log masuk

    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;
    }
    Salin selepas log masuk

    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%;
      }
    }
    Salin selepas log masuk

    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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan