HTML-Layout
Seitenlayout das Aussehen der Website zu verbessern ist sehr wichtig.
Bitte sorgfältig gestalten Sie Ihre Seitenlayout.
Online Beispiele
Seitenlayout mit dem <div> Element
Wie Sie das <div> Element Layout zu verwenden.
Verwenden Sie das Seitenlayout Element <table>
Wie Sie das Element <table> zu Layout zu verwenden.
Site-Layout
Die meisten Websites werden eine Vielzahl von Spalten Inhalt in (wie eine Zeitschrift oder Zeitung, dass).
Die meisten Websites können die <div> bzw. <table> Elemente mehrere Spalten zu erstellen. CSS wird verwendet, um Elemente zu positionieren, oder einen Hintergrund und bunte Erscheinungsbild der Seite erstellen.
Wir können zwar die HTML-Tabellen-Tag verwenden, um ein schönes Layout zu entwerfen, aber die Tabelle Tag ist nicht für die Verwendung als Layout-Tool empfohlen - nicht ein Tabellen-Layout-Tools. |
HTML-Layout - Mit <div> Element
div-Element ist ein Element auf Blockebene für die Gruppierung der HTML-Elemente verwendet.
Das folgende Beispiel verwendet fünf div-Elemente Multi-Spalten-Layout zu erstellen:
Beispiele
Versuchen »
Die obige HTML-Code erzeugt die folgenden Ergebnisse:
HTML-Layout - mit Hilfe von Tabellen
Verwenden Sie HTML <table> -Tag ist ein Layout auf einfache Weise zu erstellen.
Die meisten Websites können die <div> bzw. <table> Elemente mehrere Spalten zu erstellen. CSS wird verwendet, um Elemente zu positionieren, oder einen Hintergrund und bunte Erscheinungsbild der Seite erstellen.
Auch wenn Sie HTML-Tabellen verwenden, um ein schönes Layout zu erstellen, aber der Zweck ist es, die Konstruktionstabelle Tabellendaten zu präsentieren - nicht Tabellen-Layout-Tool! |
Im folgenden Beispiel werden drei Reihen von zwei Tabellen - die erste und die letzte Zeile verwendet colspan Attribut zwei zu überbrücken:
Beispiele
Versuchen »
Die obige HTML-Code erzeugt die folgenden Ergebnisse:
HTML-Layout - Praktische Tipps
Tipp: die größten Vorteile von CSS ist , dass , wenn die CSS - Code in einem externen Stylesheet gespeichert ist, dann wird die Website leichter zu pflegen.Durch die Bearbeitung einer einzelnen Datei, können Sie das Layout für alle Seiten ändern. Um mehr über CSS zu erfahren, besuchen Sie unsere CSS Tutorial .
Tipp: Durch erweiterte Layout zu erstellen ist sehr zeitaufwendig, mit Hilfe einer Schablone eine schnelle Option.Durch eine Suchmaschine können Sie eine Menge kostenlose Website-Vorlagen finden (Sie diese vorkompilierte Site-Layout verwenden können, und zu optimieren).
HTML-Layout-Tags
标签 | 描述 |
---|---|
<div> | 定义文档区块,块级(block-level) |
<span> | 定义 span,用来组合文档中的行内元素。 |