HTML-Layout-Vorlagen

Hier ist eine Sammlung von HTML-Vorlagen, die grundlegende Website-Layouts bereitstellen.

Jedes Layout umfasst die folgenden fünf Hauptbereiche, die auf jeder Website verwendet werden:

• Kopfbereich

• Fußbereich

• Navigationsmenü

• Hauptinhaltsbereich

• zusätzliche Elemente

• Zwei Spalten, linkes Menü (Vorlage 01)

• Drei prozentuale Spalten (Vorlage 02)

• Drei prozentuale Spalten (Vorlage 03)

• Drei prozentuale Spalten (Vorlage 04)

• Drei prozentuale Spalten (Vorlage 05)

• Drei prozentuale Spalten (Vorlage 06)

• Drei feste Spalten (Vorlage 07)

• Drei feste Spalten (Vorlage 08)

• Drei feste Spalten (Vorlage 09)

• Drei feste Spalten (Vorlage 10)

• Drei feste Spalten (Vorlage 11)

• Drei feste Spalten (Vorlage 12)

• Flüssig, sekundäre Spalten mit fester Breite (Vorlage 13)

• Flüssig, sekundäre Spalten mit fester Breite (Vorlage 14)

• Flüssig, sekundäre Spalten mit fester Breite (Vorlage 15)

• Flüssig, sekundäre Spalten mit fester Breite (Vorlage 16)

• Flüssig, sekundäre Spalten mit fester Breite (Vorlage 17)

• Flüssig, sekundäre Spalten mit fester Breite (Vorlage 18)

• Flüssig, drei Spalten, hybride Breiten (Vorlage 19)

• Flüssig, drei Spalten, hybride Breiten (Vorlage 20)

• Flüssig, drei Spalten, hybride Breiten (Vorlage 21)

• Flüssig, drei Spalten, hybride Breiten (Vorlage 22)

• Zwei Spalten flüssig, Seite fest (Vorlage 23)

• Zwei Spalten flüssig, Seite fest (Vorlage 24)

• Zwei prozentuale Spalten (Vorlage 25)

• Zwei prozentuale Spalten (Vorlage 26)

• Eine flüssige Spalte und zwei Hälften (Vorlage 27)

• Eine flüssige Spalte und zwei Hälften (Vorlage 28)

• Zwei prozentuale Spalten und eine größere (Vorlage 29)

• Zwei prozentuale Spalten und eine größere (Vorlage 30)

• Zwei Spalten flüssig, eine Seite fest und eine große (Vorlage 31)

• Zwei Spalten flüssig, eine Seite fest und eine große (Vorlage 32)

• Zwei feste Spalten (Vorlage 33)

• Zwei feste Spalten (Vorlage 34)

• Zwei feste Spalten (Vorlage 35)

• Zwei feste Spalten (Vorlage 36)

• Zwei feste Spalten (Vorlage 37)

• Zwei feste Spalten (Vorlage 38)

• Eine feste Spalte und zwei Hälften (Vorlage 39)

• Eine feste Spalte und zwei Hälften (Vorlage 40)

Fast alle Layouts werden mit der Eigenschaft CSS float und negativen Rändern erstellt. Beim Arbeiten mit negativen Rändern an gefloateten Elementen gilt: Wird auf der Float-Seite ein negativer Rand angewendet, zieht das Element weiter in diese Richtung; wird er auf der gegenüberliegenden Seite angewendet, entsteht eine Lücke, die dazu führen kann, dass sich benachbarter Inhalt überlappt. Zum Beispiel zieht <div style="float: left; margin-right: -100%;"> das nächste gefloatete Element direkt daneben. Dieser Überlappungseffekt wird oft verwendet, um flüssige Layouts zu erstellen.

In der modernen Webentwicklung werden float-basierte Layouts weitgehend durch CSS Flexbox und CSS Grid ersetzt, die eine zuverlässigere und responsivere Layout-Steuerung bieten. Floats werden heute hauptsächlich verwendet, damit Text um Bilder herumfließt.

Vorlagen anpassen

Hier finden Sie einige Möglichkeiten, Ihre HTML-Vorlage anzupassen:

• Fügen Sie Grafiken oder Bilder zur Vorlagenstruktur hinzu.
• Ändern Sie die HTML-Struktur oder ersetzen Sie Platzhalterinhalte.
• Lernen Sie HTML mit unserem HTML-Tutorial.
• Lernen Sie, wie Sie Vorlagenstile mit unserem CSS-Tutorial ändern.
• Lernen Sie, wie Sie Vorlagen mit unserem JavaScript-Tutorial interaktiv machen.

Practice

What are the key elements in an HTML layout template?

HeaderNavigation BarContent SectionSidebarFooterBackground Image