Comment créer une mise en page de mur de cartes réactive en utilisant HTML et CSS

Comment créer une mise en page de mur de cartes réactive en utilisant HTML et CSS

Dans la conception Web moderne, la mise en page réactive est une technologie très importante. En utilisant HTML et CSS, nous pouvons créer une disposition de mur de cartes réactive qui s'adapte aux appareils de différentes tailles d'écran.

Voici les détails sur la façon de créer une disposition simple de mur de cartes réactif en utilisant HTML et CSS.

Partie HTML :

Tout d'abord, nous devons configurer la structure de base dans le fichier HTML. Nous pouvons créer des cartes en utilisant des listes non ordonnées (

) et des éléments de liste (
• ).

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

  Partie CSS :

  Ensuite, nous devons styliser la carte et le mur de cartes. Ici, nous utiliserons la disposition CSS Flexbox pour obtenir des effets réactifs.

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

  Explication du code :

  • La classe ".card-wall" est définie sur la disposition Flexbox afin que les cartes soient disposées en rangées et alignées horizontalement au centre.
  • La classe ".card" définit la largeur, les marges, la couleur d'arrière-plan, le centrage du texte et le remplissage de la carte.
  • La classe ".card img" définit la largeur de l'image dans la carte à 100%.
  • La requête "@media" sera appliquée lorsque la largeur de l'écran est inférieure à 768 pixels pour améliorer le rendu de la carte sur les petits écrans.

  En utilisant ces codes, nous pouvons facilement créer une disposition de mur de cartes réactive. Quel que soit l'appareil utilisé, les cartes se redimensionnent et s'organisent automatiquement pour s'adapter à différentes tailles d'écran.

  Bien sûr, ce n'est qu'un exemple simple. Vous pouvez améliorer le design en ajoutant plus de cartes et en utilisant des styles CSS.

  Résumé :

  Dans cet article, nous avons créé une mise en page simple de mur de cartes réactives en utilisant HTML et CSS. En utilisant les mises en page Flexbox et les requêtes multimédias, nous pouvons facilement ajuster la mise en page pour l'adapter aux appareils dotés de différentes tailles d'écran.

  Ce ne sont que les bases de la création de mises en page réactives à l'aide de HTML et CSS, vous pouvez apprendre et vous entraîner davantage pour obtenir des effets de conception plus complexes et uniques.

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!