Heim > Artikel > Web-Frontend > So erstellen Sie eine Kartenlayoutseite mit HTML und CSS

So erstellen Sie eine Kartenlayoutseite mit HTML und CSS

WBOYOriginal: 2023-10-27 12:30:11936Durchsuche

Im Webdesign ist das Kartenlayout zu einem sehr beliebten Designtrend geworden. Es zeigt Informationen in Form von Karten an, sodass die Seite übersichtlich, intuitiv und einfach zu navigieren ist. In diesem Artikel werde ich Ihnen zeigen, wie Sie mit HTML und CSS eine einfache Kartenlayoutseite erstellen und konkrete Codebeispiele bereitstellen.

Schritt 1: HTML-Struktur erstellen
Zuerst müssen wir die Grundstruktur von HTML erstellen. Das Folgende ist ein einfacher Beispielcode:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>卡片式布局页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="card">
      <img src="image1.jpg" alt="图片1">
      <h2>卡片标题1</h2>
      <p>卡片正文内容1</p>
    </div>
    <div class="card">
      <img src="image2.jpg" alt="图片2">
      <h2>卡片标题2</h2>
      <p>卡片正文内容2</p>
    </div>
    <div class="card">
      <img src="image3.jpg" alt="图片3">
      <h2>卡片标题3</h2>
      <p>卡片正文内容3</p>
    </div>
  </div>
</body>
</html>

Im obigen Code erstellen wir einen Div-Container mit dem Namen „Container“, um die Karte einzupacken. Jede Karte besteht aus einem div-Element mit der Klasse „card“, das ein Bild, einen Titel und einen Text enthält.

Schritt 2: CSS-Stile schreiben
Als nächstes müssen wir der Karte Stile hinzufügen. Das Folgende ist ein einfaches CSS-Codebeispiel:

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 300px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.card p {
  font-size: 16px;
}

Im obigen Code verwenden wir das Flex-Layout, um die Karte automatisch in horizontaler Richtung umzubrechen. Jede Karte hat eine Breite von 300 Pixel, einen Rand und einen Abstand von 20 Pixel, einen festen 1-Pixel-Rand mit abgerundeten Ecken, zentrierten Text und einen Schatteneffekt.

Das Bild verwendet 100 % Breite und legt eine adaptive Höhe fest. Die Schriftgrößen für Titel und Fließtext betragen 24 bzw. 16 Pixel.

Schritt 3: Datei speichern und Vorschau anzeigen
Speichern Sie den obigen HTML-Code als Datei mit dem Namen „index.html“ und den CSS-Code als Datei mit dem Namen „style.css“. Stellen Sie sicher, dass sich die HTML- und CSS-Dateien im selben Ordner befinden, und legen Sie die Bilddateien (image1.jpg, image2.jpg und image3.jpg) ebenfalls in diesem Ordner ab.

Öffnen Sie dann die Datei „index.html“ im Browser, um eine Vorschau der Kartenlayoutseite anzuzeigen.

Zusammenfassung
Durch die oben genannten Schritte haben wir erfolgreich eine einfache Kartenlayoutseite mit HTML und CSS erstellt. Durch den flexiblen Einsatz von CSS-Stilen können wir das Layout und Erscheinungsbild der Karte nach Bedarf anpassen.

Natürlich ist das obige Beispiel nur ein einfaches Beispiel, Sie können es entsprechend Ihren tatsächlichen Anforderungen ändern und erweitern. Ich hoffe, dieser Artikel kann Ihnen hilfreich sein und wünsche Ihnen bessere Ergebnisse beim Kartenlayout!

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

css html class margin padding flex

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML-Tutorial: So verwenden Sie das Rasterlayout für ein automatisch adaptives RasterlayoutNächster Artikel：HTML-Tutorial: So verwenden Sie das Rasterlayout für ein automatisch adaptives Rasterlayout

In Verbindung stehende Artikel

Mehr sehen