CSS -Website-Layout
Website-Layout
Eine Website ist oft in Kopfzeilen, Menüs, Inhalt und eine Fußzeile unterteilt:
Es stehen unzählige verschiedene Layout-Designs zur Auswahl. Die obige Struktur ist jedoch eine der häufigsten, und wir werden sie in diesem Tutorial genauer betrachten.
Header
Eine Kopfzeile befindet sich normalerweise oben auf der Website (oder direkt unter einem oberen Navigationsmenü). Es enthält oft ein Logo oder den Namen der Website:
Beispiel
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Ergebnis
Header
Navigationsleiste
Eine Navigationsleiste enthält eine Liste mit Links, die Besuchern helfen, durch Ihre Website zu navigieren:
Beispiel
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Ergebnis
Inhalt
Das Layout in diesem Abschnitt hängt oft von den Zielbenutzern ab. Das gebräuchlichste Layout ist eines (oder eine Kombination aus ihnen) der folgenden:
- 1-Spalte (häufig für mobile Browser verwendet)
- 2-spaltig (häufig für Tablets und Laptops verwendet)
- 3-Spalten-Layout (wird nur für Desktops verwendet)
1-spaltig:
2-spaltig:
3-spaltig:
Wir erstellen ein 3-Spalten-Layout und ändern es auf kleineren Bildschirmen in ein 1-Spalten-Layout:
Beispiel
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Ergebnis
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Tipp: Um ein zweispaltiges Layout zu erstellen, ändern Sie die Breite auf 50 %. Um ein 4-Spalten-Layout zu erstellen, verwenden Sie 25 % usw.
Tipp: Fragen Sie sich, wie die @media-Regel funktioniert? Lesen Sie mehr darüber in unserem Kapitel CSS Media Queries .
Tipp: Eine modernere Art, Spaltenlayouts zu erstellen, ist die Verwendung von CSS Flexbox. Es wird jedoch in Internet Explorer 10 und früheren Versionen nicht unterstützt. Wenn Sie IE6-10-Unterstützung benötigen, verwenden Sie Floats (wie oben gezeigt).
Um mehr über das flexible Box-Layout-Modul zu erfahren, lesen Sie unser CSS-Flexbox-Kapitel .
Ungleiche Spalten
Der Hauptinhalt ist der größte und wichtigste Teil Ihrer Website.
Es ist üblich mit ungleichen Spaltenbreiten, so dass der meiste Platz für den Hauptinhalt reserviert ist. Der Nebeninhalt (falls vorhanden) wird häufig als alternative Navigation oder zur Angabe von Informationen verwendet, die für den Hauptinhalt relevant sind. Ändern Sie die Breiten nach Belieben, denken Sie nur daran, dass sich insgesamt 100% ergeben sollten:
Beispiel
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Ergebnis
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Fusszeile
Die Fußzeile wird am unteren Rand Ihrer Seite platziert. Es enthält oft Informationen wie Copyright und Kontaktinformationen:
Beispiel
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Ergebnis
Responsives Website-Layout
Durch die Verwendung einiger der obigen CSS-Codes haben wir ein ansprechendes Website-Layout erstellt, das je nach Bildschirmbreite zwischen zwei Spalten und Spalten voller Breite variiert:
Schon mal von W3Schools Spaces gehört ? Hier können Sie Ihre Website von Grund auf neu erstellen oder eine Vorlage verwenden und kostenlos hosten.
Kostenlos starten ❯* Keine Kreditkarte benötigt