Hier ist eine Sammlung von HTML-Templates, die grundlegende Website-Layouts bereitstellt. Jedes Layout enthält fünf Hauptbereiche, die in jeder Website verwendet werden: Kopfzeile, Fußzeile, Navigationsmenü, Hauptinhaltsbereich und zusätzliches Material.
Fast alle Layouts sind mit CSS-Eigenschaft float und negative Margins erstellt. Es gibt zwei Dinge, die Sie über negative Margin wissen sollten: Wenn wir negative Margin auf der Float-Seite anwenden, hat das den Effekt, dass die Float-Elemente noch mehr in Richtung Float-Seite verschoben werden; wenn wir einen negativen Rand gegenüber einem Float anwenden, entsteht eine Lücke, die zu einer inhaltlichen Überlappung führt, und das ist sehr hilfreich bei der Erstellung von flüssigen Layouts.
In modernen Webseiten werden float-basierte Layouts durch flexible Layouts ersetzt, die mit CSS-Flexbox Layout Module erstellt wurden.
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)
Liquide Sekundärspalten mit fester Breite
(Vorlage 13)
Liquide Sekundärspalten mit fester Breite
(Vorlage 14)
Liquide Sekundärspalten mit fester Breite
(Vorlage 15)
Liquide Sekundärspalten mit fester Breite
(Vorlage 16)
Liquide Sekundärspalten mit fester Breite
(Vorlage 17)
Liquide Sekundärspalten mit fester Breite
(Vorlage 18)
Liquide, drei Spalten, Hybridbreiten
(Vorlage 19)
Liquide, drei Spalten, Hybridbreiten
(Vorlage 20)
Liquide, drei Spalten, Hybridbreiten
(Vorlage 21)
Liquide, drei Spalten, Hybridbreiten
(Vorlage 22)
Zwei Spalten, liquid, seitlich fixiert
(Vorlage 23)
Zwei Spalten, liquid, seitlich fixiert
(Vorlage 24)
Zwei prozentuale Spalten
(Vorlage 25)
Zwei prozentuale Spalten
(Vorlage 26)
Eine Spalte liquid und zwei Hälften
(Vorlage 27)
Eine Spalte liquid und zwei Hälften
(Vorlage 28)
Zwei Prozentspalten und eine größere Spalte
(Vorlage 29)
Zwei Prozentspalten und eine größere Spalte
(Vorlage 30)
Zwei Spaltn liquid, feste Seite und große Seite
(Vorlage 31)
Zwei Spaltn liquid, feste Seite und große Seite
(Vorlage 32)
Zwei Spalten fixiert
(Vorlage 33)
Zwei Spalten fixiert
(Vorlage 34)
Zwei Spalten fixiert
(Vorlage 35)
Zwei Spalten fixiert
(Vorlage 36)
Zwei Spalten fixiert
(Vorlage 37)
Zwei Spalten fixiert
(Vorlage 38)
Eine Spalte fixiert und zwei Hälften
(Vorlage 39)
Eine Spalte fixiert und zwei Hälften
(Vorlage 40)
Übe dein Wissen
