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.
Two columns, left menu
(template 01)
Three percentage columns
(template 02)
Three percentage columns
(template 03)
Three percentage columns
(template 04)
Three percentage columns
(template 05)
Three percentage columns
(template 06)
Three fixed columns
(template 07)
Three fixed columns
(template 08)
Three fixed columns
(template 09)
Three fixed columns
(template 10)
Three fixed columns
(template 11)
Three fixed columns
(template 12)
Liquid, secondary columns fixed-width
(template 13)
Liquid, secondary columns fixed-width
(template 14)
Liquid, secondary columns fixed-width
(template 15)
Liquid, secondary columns fixed-width
(template 16)
Liquid, secondary columns fixed-width
(template 17)
Liquid, secondary columns fixed-width
(template 18)
Liquid, three columns, hybrid widths
(template 19)
Liquid, three columns, hybrid widths
(template 20)
Liquid, three columns, hybrid widths
(template 21)
Liquid, three columns, hybrid widths
(template 22)
Two columns liquid, side fixed
(template 23)
Two columns liquid, side fixed
(template 24)
Two percentage columns
(template 25)
Two percentage columns
(template 26)
One column liquid and two halves
(template 27)
One column liquid and two halves
(template 28)
Two percentage columns and one larger
(template 29)
Two percentage columns and one larger
(template 30)
Two columns liquid, fixed side and large one
(template 31)
Two columns liquid, fixed side and large one
(template 32)
Two columns fixed
(template 33)
Two columns fixed
(template 34)
Two columns fixed
(template 35)
Two columns fixed
(template 36)
Two columns fixed
(template 37)
Two columns fixed
(template 38)
One column fixed and two halves
(template 39)
One column fixed and two halves
(template 40)
Übe dein Wissen
