Comment créer une présentation d'affichage de galerie d'images réactive à l'aide de HTML et CSS

Comment créer une mise en page d'affichage de galerie d'images réactive à l'aide de HTML et CSS

À l'ère d'Internet d'aujourd'hui, l'affichage de galerie d'images est une mise en page courante dans la conception Web, qui peut afficher diverses images et œuvres d'images. Afin de permettre aux utilisateurs d’avoir une bonne expérience de navigation sur différents appareils, le responsive design devient de plus en plus important. Cet article explique comment utiliser HTML et CSS pour créer une présentation d'affichage de galerie d'images réactive et fournit des exemples de code spécifiques.

Étape 1 : Créer une structure HTML de base

Tout d'abord, nous devons créer une structure HTML de base. Nous utiliserons une liste non ordonnée (

) pour contenir tous les éléments de l'image, et utiliserons des éléments de liste (
• ) pour envelopper chaque image. Dans chaque élément de la liste, nous utiliserons la balise pour intégrer l'image.

  <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>

  Étape 2 : Appliquer les styles CSS

  Ensuite, nous devons ajouter des styles CSS à la galerie d'images pour créer une galerie avec une mise en page réactive. Tout d’abord, nous devons définir la hauteur et la largeur de la galerie. Pour réaliser un design responsive, nous utiliserons des pourcentages pour définir la largeur.

  .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;
  }

  Avec les styles CSS ci-dessus, nous définissons la largeur du conteneur de la galerie à 100 %, mais la largeur maximale est de 1 200 px. Chaque élément de liste (c'est-à-dire image) a une largeur de 30 % et un remplissage de 10 px.

  Étape 3 : Mettre en œuvre un design réactif

  Pour mettre en œuvre un design réactif, nous pouvons utiliser des requêtes multimédias pour nous adapter aux différentes tailles d'écran. Pour améliorer l'affichage de la présentation de la galerie sur les appareils à petit écran, nous pouvons le faire en modifiant la largeur de chaque élément de la liste.

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

  Le code CSS ci-dessus utilise des requêtes multimédias pour modifier la largeur des éléments de la liste sur les appareils à petit écran à 50 % et 100 % respectivement pour s'adapter aux différentes tailles d'écran.

  Grâce aux étapes ci-dessus, nous avons réussi à créer une présentation d'affichage de galerie d'images réactive. Cette disposition peut s'adapter à différentes tailles d'écran sur différents appareils et offrir une bonne expérience utilisateur.

  Résumé

  Cet article explique comment créer une mise en page d'affichage de galerie d'images réactive à l'aide de HTML et CSS. En configurant la structure HTML et en appliquant des styles CSS, nous pouvons obtenir un design réactif qui s'adapte aux différentes tailles d'écran. J'espère que cet article vous a aidé à comprendre le design réactif et à créer des mises en page de galerie d'images.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!