Latest web development tutorials

HTML-Layout

Seitenlayout das Aussehen der Website zu verbessern ist sehr wichtig.

Bitte sorgfältig gestalten Sie Ihre Seitenlayout.


Beispiele

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.

Lampe 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

<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Titel> Dieses Tutorial (w3big.com) </ title> </ Head> <Body> <Div id = "container" style = "width: 500px"> <Div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> Die Seitentitel </ h1> </ div> <Div id = "menu" style = "background-color: # FFD700; height: 200px; width: 100px; float: left;"> <B> Menü </ b> <br> HTML <br> CSS <br> JavaScript </ div> <Div id = "content" style = "background-color: #EEEEEE ; height: 200px; width: 400px; float: left;"> Text hier </ div> <Div id = "footer" style = "background-color: # FFA500; clear: both; text-align: center;"> Urheberrecht © w3big.com </ div> </ Div> </ Body> </ Html>

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.

Lampe 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

<! DOCTYPE html> <Html> <Head> <Meta charset = "UTF-8"> <Titel> Dieses Tutorial (w3big.com) </ title> </ Head> <Body> <Table width = "500" border = "0"> <Tr> <Td colspan = "2" style = "background-color: # FFA500;"> <H1> Seitentitel </ h1> </ Td> </ Tr> <Tr> <Td style = "background-color: # FFD700; width: 100px;"> <B> Menü </ b> <br> HTML <br> CSS <br> JavaScript </ td> <Td style = "background-color: #EEEEEE ; height: 200px; width: 400px;"> Text hier </ td> </ Tr> <Tr> <Td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Urheberrecht © w3big.com </ td> </ Tr> </ Table> </ Body> </ Html>

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,用来组合文档中的行内元素。