3 Spalten für eine Web-Seite in HTML erstellen
Spalten ermöglichen die Anpassung des Layouts einer Web-Seite. Sie zeigen Informationen vertikal und helfen Ihnen, getrennte Bereiche unterscheiden. Auf einer Seite drei Spalten mithilfe der ersten Spalte für Navigation, in der mittleren Spalte für Ihre wichtigsten Inhalte und die letzte Spalte für zusätzliche Informationen, die Sie heraufstufen möchten. Hyper Text Markup Language können Sie die Tags "DIV" oder "Tabelle" verwenden, um Spalten zu erstellen, und geben die Grenzen, die Größe und die Hintergründe der Zellen.
Anweisungen
Verwendung von DIVs
1 Starten Sie einen Texteditor wie Notepad, WordPad oder EditPad. Wählen Sie "Datei" und "Neu" Menü, um ein neues Dokument erstellen.
2 Kopieren Sie die Tastenkombination "Strg" und "C" und fügen Sie--"Ctrl" und "V"--den folgenden HTML-Code auf Ihre Seite. Es wird die Seite drei Spalten hinzugefügt:
< html >
< Head >
< Stil >
<!--
wichtigsten {} Breite: 100 %;
}
{.column1}
Hintergrund-Farbe: gelb;
Padding: 2px;
Margin-Right: 5px;
Breite: 150px;
Float: Left;
}
{.column2}
Hintergrund-Farbe: blau;
Padding: 2px;
Margin-Right: 5px;
Breite: 75px;
Float: Left;
}
{.column3}
Hintergrund-Farbe: rot;
Padding: 2px;
Margin-Right: 5px;
Breite: 100px;
Float: Left;
}
-->
< / style >
< / head >
< Körper >
< Div Id = "main" >
< Div Class = "Spalte1" > Inhalt der ersten Spalte < / Div >
< Div Class = "Spalte2" > Inhalt der zweiten Spalte < / Div >
< Div Class = "column3" > Inhalt der dritten Spalte < / Div >
< / Div >
< / body >
< / html >
3 Ersetzen Sie "Breite" für ".column1", ".column2" und ".column3" mit der Breite, die Sie festlegen möchten. Ersetzen Sie den Wert "Background-Color" für jede Spalte mit der Hintergrundfarbe, die Sie anwenden möchten. Um Spalten ohne einen Hintergrund zu erstellen, entfernen Sie die Zeile mit "Hintergrundfarbe," wie:
Hintergrund-Farbe: rot;
Verwendung von Tabellen
4 Wählen Sie "Datei" und "Neu" aus dem Menü in Ihrem bevorzugten Text-Editor.
5 Kopieren Sie und fügen Sie den folgenden HTML-Code auf Ihre Seite drei Spalten einfügen:
< html >
< Körper >
< table Width = "100 %" >
< tr >
< td Style = "Width: 250px; Hintergrund-Farbe: gelb; Text-align: top; " > Inhalt der ersten Spalte </td >
< td Style = "Width: 250px; Hintergrund-Farbe: blau; Text-align: top; " > Inhalt der zweiten Spalte </td >
< td Style = "Width: 250px; Hintergrund-Farbe: rot; Text-align: top; " > Inhalt der dritten Spalte </td >
</tr >
< / table >
< / body >
< / html >
6 Ersetzen Sie die Breite durch die Breite der Spalte, die Sie festlegen möchten. Ersetzen Sie den Wert für "Background-Color" durch den gewünschten Hintergrund. Um die Hintergrundfarbe zu entfernen, entfernen Sie ihres Codes, wie z.B.:
Hintergrund-Farbe: gelb;