Dreispaltiges HTML-Layout
- Erstellen Sie ein dreispaltiges Layout in HTML
- Erstellen Sie ein ansprechendes dreispaltiges Layout in HTML
- Abschluss
Websites verwenden häufig mehrere Spalten, um Inhalte anzuzeigen. Das Spaltenlayout kann auf zahlreiche Arten gemäß den Anforderungen des Designers gestaltet werden.
Mit einer Kombination aus HTML und CSS können wir ansprechende und ansprechende Spaltenlayouts erstellen. In diesem Artikel konzentrieren wir uns auf das Entwerfen eines 3-Spalten-Layouts.
Erstellen Sie ein dreispaltiges Layout in HTML
Im Allgemeinen werden HTML-Spalten mit dem <div>-Tag definiert. Zwischen dem Tag <div> definieren wir die Klasse mit dem Schlüsselwort row.
Beim Definieren eines dreispaltigen Layouts sollten drei <div>-Elemente und drei column-Klassen dazwischen erstellt werden.
Schauen wir uns das folgende Beispiel an.
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
In Anbetracht des obigen HTML-Codes haben wir die Klasse row innerhalb des ersten darin enthaltenen <div>-Elements deklariert. Als Klassen sind drei Spalten definiert, die den gesamten Browserbereich aufteilen können.
Mit dem Element style können wir Hintergrundfarben für die drei Spalten hinzufügen.
Der Inhalt der Kolumnen ist absolut den Gedanken des Designers überlassen. Mit Hilfe des obigen Codes können wir ein einfaches 3-Spalten-Layout entwerfen.
Es wird dringend empfohlen, einige CSS-Eigenschaften hinzuzufügen, um ein korrektes 3-Spalten-Layout zu erhalten. Zu diesem Zweck können wir den folgenden CSS-Code verwenden.
CSS-Eigenschaften zum HTML-Spaltenlayout hinzufügen
Wir können ein einfaches Spaltenlayout mit HTML-Eigenschaften erstellen, aber mit Hilfe von CSS-Eigenschaften wäre es besonders interaktiv. Sie helfen, die Spalten zu gestalten.
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
Das 3-Spalten-Layout kann als Raster erfolgen. Der obige CSS-Code zeigt, wie die Eigenschaft display verwendet wird, um das Rasterlayout anzuzeigen.
Wir haben die Eigenschaft grid-template-columns, um den gesamten Bereich des Browserbereichs in die gleichen drei Spalten zu unterteilen.
Die CSS-Eigenschaft height definiert die Höhe der Spalte. Die Eigenschaft justify-content wird verwendet, um den Inhalt in jeder Spalte zu rechtfertigen.
Zusätzlich haben wir text-align und font-size hinzugefügt.
Als Ergebnis der obigen HTML- und CSS-Codes können wir ein 3-Spalten-Layout wie das folgende erhalten.
Das Weblayout muss zu bestimmten Bildschirmtypen passen. Wir werden ein responsives 3-Spalten-HTML-Layout erstellen, um einige HTML-Elemente zu unterstützen.
Sehen wir uns an, wie Sie ein ansprechendes Spaltenlayout entwerfen.
Erstellen Sie ein ansprechendes dreispaltiges Layout in HTML
Es gibt mehrere Möglichkeiten, das Spaltenlayout responsive zu gestalten. Wir können ein viewport-Element hinzufügen, um das Layout an verschiedene Bildschirme anzupassen.
<meta name="viewport" content="width=device-width, initial-scale=1">
Das Tag <meta> wird verwendet, um das Element viewport hinzuzufügen, das den Viewport der Webseite festlegt. Das Festlegen des Darstellungsbereichs der Webseite weist den Browser an, die Größe und Skalierung der Seite zu verwalten.
Mit dem obigen HTML-Code können wir das Spaltenlayout für alle Arten von Bildschirmgrößen anpassen. Wir sollten den obigen Code als folgenden Code in das head-Element des HTML-Codes einfügen.
<!DOCTYPE html>
<html>
<head>
<title>html 3 column layout</title>
<link rel="stylesheet" href="style1.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
.row{
display:grid;
grid-template-columns: 33.33% 33.33% 33.33%;
justify-content: center;
text-align: center;
font-size: 25px;
height: 300px;
}
</style>
</head>
<body>
<h1>
Column three layout
</h1>
<div class="row">
<div class="column" style="background-color:#404040;">Content of the column</div>
<div class="column" style="background-color:#a0a0a0;">Content of the column</div>
<div class="column" Style="background-color:#dcdcdc;">Content of the column</div>
</div>
</body>
</html>
Abschluss
Das 3-spaltige HTML-Layout kann erstellt werden, indem einfach das Element <div> mit den Klassen row und column definiert und einige CSS-Stileigenschaften hinzugefügt werden. In diesem Artikel wurde das Erstellen eines einfachen 3-Spalten-Layouts mit HTML und das Hinzufügen einiger CSS-Eigenschaften zur Gestaltung beschrieben.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.