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

So erstellen Sie ein responsives Kartenwandlayout mit HTML und CSS

Im modernen Webdesign ist responsives Layout eine sehr wichtige Technologie. Mithilfe von HTML und CSS können wir ein responsives Kartenwand-Layout erstellen, das sich an Geräte mit unterschiedlichen Bildschirmgrößen anpasst.

Hier finden Sie Details zum Erstellen eines einfachen responsiven Kartenwandlayouts mit HTML und CSS.

HTML-Teil:

Zuerst müssen wir die Grundstruktur in der HTML-Datei einrichten. Wir können Karten mit ungeordneten Listen (

) und Listenelementen (
• ) erstellen.

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

  CSS-Teil:

  Dann müssen wir die Karte und die Kartenwand gestalten. Hier verwenden wir das CSS-Flexbox-Layout, um reaktionsfähige Effekte zu erzielen.

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

  Code-Erklärung:

  • Die Klasse „.card-wall“ ist auf das Flexbox-Layout eingestellt, sodass die Karten in Reihen angeordnet und horizontal in der Mitte ausgerichtet sind.
  • Die Klasse „.card“ legt die Breite, die Ränder, die Hintergrundfarbe, die Textzentrierung und den Abstand der Karte fest.
  • Die Klasse „.card img“ setzt die Breite des Bildes in der Karte auf 100 %.
  • Die „@media“-Abfrage wird angewendet, wenn die Bildschirmbreite weniger als 768 Pixel beträgt, um die Karte auf kleinen Bildschirmen besser darzustellen.

  Mit diesen Codes können wir ganz einfach ein responsives Kartenwandlayout erstellen. Unabhängig vom verwendeten Gerät wird die Größe der Karten automatisch angepasst und an unterschiedliche Bildschirmgrößen angepasst.

  Natürlich ist dies nur ein einfaches Beispiel. Sie können das Design verbessern, indem Sie weitere Karten hinzufügen und CSS-Stile verwenden.

  Zusammenfassung:

  In diesem Artikel haben wir ein einfaches responsives Kartenwandlayout mit HTML und CSS erstellt. Durch die Verwendung von Flexbox-Layouts und Medienabfragen können wir das Layout problemlos an Geräte mit unterschiedlichen Bildschirmgrößen anpassen.

  Dies sind nur die Grundlagen zum Erstellen responsiver Layouts mit HTML und CSS. Sie können weiter lernen und üben, um komplexere und einzigartigere Designeffekte zu erzielen.

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