CSS-Weblayout

Weblayout

Es gibt viele Methoden, Webseiten zu layouten, die allgemein in folgende Teile unterteilt werden:Header-Bereich, Menünavigationsbereich, Inhaltsbereich, Fußbereich。

Header-Bereich

Der Header-Bereich befindet sich oben auf der gesamten Webseite und wird im Allgemeinen verwendet, um den Titel oder das Logo der Webseite festzulegen:

CSS3-Beispiele

.header { background-color: #F1F1F1; text-align: center; padding: 20px; }

Selbst ausprobieren »

Menünavigationsbereich

Die Menünavigationsleiste enthält einige Links, die Benutzer zum Durchsuchen anderer Seiten führen können:

CSS3-Beispiele

/*Navigationsleiste*/ .topnav { overflow: hidden; background-color: #333; } /*Navigationslinks*/ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } /*Links - Farbe ändern*/ .topnav a:hover { background-color: #ddd; color: black; }

Selbst ausprobieren »

Inhaltsbereich

Der Inhaltsbereich hat im Allgemeinen drei Formen:

  • 1 Spalte: wird im Allgemeinen für Mobilgeräte verwendet
  • 2 Spalten: wird im Allgemeinen für Tablet-Geräte verwendet
  • 3 Spalten: wird im Allgemeinen für PC-Desktop-Geräte verwendet

Wir werden ein 3-Spalten-Layout erstellen, das auf kleinen Bildschirmen zu einem 1-Spalten-Layout wird (responsiv):

CSS3-Beispiele

/*Drei gleich breite Spalten erstellen*/ .column { float: left; width: 33.33%; } /*Floats nach Spalten löschen*/ .row:after { content: ""; display: table; clear: both; } /*Responsives Layout - bei weniger als 600 px zu einem vertikalen Layout wechseln*/ @media screen and (max-width: 600px) { .column { width: 100%; } }

Selbst ausprobieren »

Tipp:Um zwei Spalten festzulegen, können Sie width auf 50% einstellen. Um 4 Spalten zu erstellen, können Sie width auf 25% einstellen.

Tipp:Wenn Sie mehr über @media-Regeln erfahren möchten, können Sie sichCSS3-Medienabfragen ansehen.。

Tipp:Eine fortgeschrittenere Methode ist jetzt die Verwendung von CSS Flexbox, um Spaltenlayouts zu erstellen, aber Internet Explorer 10 und frühere Versionen unterstützen diese Methode nicht. IE6-10 können die Float-Methode verwenden.

Weitere Inhalte zu CSS Flexbox finden Sie unterCSS3 Flexible Box (Flex Box)。

Ungleiche Spalten

Bei ungleichen Spalten wird der Inhaltsbereich in der Regel im mittleren Teil festgelegt, der auch der größte und wichtigste ist. Die linken und rechten Seiten können für Navigation und andere verwandte Inhalte verwendet werden. Die Gesamtbreite dieser drei Spalten beträgt 100%.

CSS3-Beispiele

.column { float: left; } /*Breiten der linken und rechten Seitenleiste*/ .column.side { width: 25%; } /*Breite der mittleren Spalte*/ .column.middle { width: 50%; } /*Responsives Layout – vertikales Layout einstellen, wenn die Breite kleiner als 600px ist*/ @media screen and (max-width: 600px) { .column.side, .column.middle { width: 100%; } }

Selbst ausprobieren »

Footer-Bereich

Der Footer-Bereich befindet sich ganz unten auf der Webseite und enthält in der Regel Urheberrechtshinweise, Kontaktinformationen usw.

CSS3-Beispiele

.footer { background-color: #F1F1F1; text-align: center; padding: 10px; }

Selbst ausprobieren »

Responsives Web-Layout

Basierend auf dem oben Gelernten erstellen wir nun eine responsive Seite. Das Seitenlayout passt sich an die Größe des Bildschirms an:

CSS3-Beispiele

* { box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #f1f1f1; } /*Header-Titel*/ .header { padding: 30px; text-align: center; background: white; } .header h1 { font-size: 50px; } /*Navigationsleiste*/ .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; } /*Änderung der Linkfarbe*/ .topnav a:hover { background-color: #ddd; color: black; } /*Zwei Spalten erstellen*/ /* Linke Spalte */ .leftcolumn { float: left; width: 75%; } /*Rechte Seitenleiste*/ .rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; } /*Bildbereich*/ .fakeimg { background-color: #aaa; width: 100%; padding: 20px; } /*Artikelkarten-Effekt*/ .card { background-color: white; padding: 20px; margin-top: 20px; } /*Floats nach Spalten aufheben*/ .row:after { content: ""; display: table; clear: both; } /*Fußzeile*/ .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } /*Responsives Layout – wenn die Bildschirmgröße kleiner als 800px ist, wechselt das zweispaltige Layout zu einem vertikalen Layout*/ @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } /*Responsives Layout – wenn die Bildschirmgröße kleiner als 400px ist, wechseln Navigation und andere Layouts zu einem vertikalen Layout*/ @media screen and (max-width: 400px) { .topnav a { float: none; width: 100%; } }

Selbst ausprobieren »
Weitere Erweiterungen