So erstellen Sie ein responsives Fotogalerie-Layout mit HTML und CSS

So erstellen Sie ein responsives Anzeigelayout für Bildsammlungen mit HTML und CSS

Im Webdesign ist die Anzeige von Bildsammlungen ein häufiges Bedürfnis. Um ein besseres Benutzererlebnis zu bieten, möchten wir, dass diese Bilder auf verschiedenen Geräten angemessen angezeigt werden und nicht nur skaliert werden. Dies erfordert die Gestaltung eines responsiven Anzeigelayouts für die Bildersammlung. In diesem Artikel erklären wir, wie man ein solches Layout mit HTML und CSS erstellt, und stellen konkrete Codebeispiele bereit.

Zuerst müssen wir HTML verwenden, um die Struktur der Bildanzeige aufzubauen. Wir können ungeordnete Listen (

<ul class="gallery">
  <li>
    <img src="image1.jpg" alt="Image 1">
    <h3>图片标题1</h3>
    <p>图片描述1</p>
  </li>
  <li>
    <img src="image2.jpg" alt="Image 2">
    <h3>图片标题2</h3>
    <p>图片描述2</p>
  </li>
  <!-- 更多图片 -->
</ul>

.gallery {
  width: 80%;
  margin: 0 auto;
}

.gallery img {
  max-width: 100%;
  height: auto;
}

.gallery img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.gallery h3,
.gallery p {
  text-align: center;
  margin: 10px 0;
}

@media (max-width: 600px) {
  .gallery li {
    width: 100%;
  }
}

@media (min-width: 601px) {
  .gallery li {
    width: 50%;
  }
}

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein responsives Fotogalerie-Layout mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!