CSS-Website-Layout

Website layout

Websites are usually divided into header, menu, content, and footer:

There are many different layout designs to choose from. However, the above structure is one of the most common structures, and we will study it in detail in this tutorial.

Page header

The page header (header) is usually located at the top of the website (or just below the top navigation menu). It usually contains a logo or the name of the website:

Beispiel

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

Ergebnis:

Page header

Versuchen Sie es selbst

Navigation bar

The navigation bar contains a list of links to help visitors browse your website:

Beispiel

/* Navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
{}
/* Navbar link */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
{}
/* Link - Change color when hovering */
.topnav a:hover {
  background-color: #ddd;
  color: black;
{}

Ergebnis:

Versuchen Sie es selbst

Content

Which layout to use usually depends on your target users. The most common layouts are one of the following (or a combination of them):

  • 1-SpaltenLayout (normalerweise für mobile Browser)
  • 2-SpaltenLayout (normalerweise für Tablets und Laptops)
  • 3-SpaltenLayout (nur für Desktops)

1-Spalten:

2-Spalten:

3-Spalten:

Wir werden ein 3-Spalten-Layout erstellen und es auf einem kleineren Bildschirm in ein 1-Spalten-Layout umwandeln:

Beispiel

/* Erstellen Sie drei gleiche Spalten, die nebeneinander schweben */
.column {
  float: left;
  width: 33.33%;
{}
/* Floats nach den Spalten bereinigen */
.row:after {
  content: "";
  display: table;
  clear: both;
{}
/* Responsives Layout - Stackt die drei Spalten anstatt nebeneinander zu platzieren, wenn der Bildschirm kleiner ist (Breite von 600 Pixel oder weniger) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  {}
{}

Ergebnis:

Komplettes Referenzhandbuch für Websitetechnologien

Unser Referenzhandbuch deckt alle Aspekte der Websitetechnologien ab.

Dies umfasst die W3C-Standardtechnologien: HTML, CSS, XML. sowie weitere Technologien wie JavaScript, PHP, SQL.

Online-Beispieltesttool

Bei CodeW3C.com bieten wir Tausende von Beispielen.

Mit unserem Online-Editor können Sie diese Beispiele bearbeiten und mit dem Code experimentieren.

Schnelle und einfache Lernmethode

Ein Zeitraum ist wertvoll wie Gold, daher bieten wir Ihnen schnell und leicht verständliches Lernmaterial.

Hier können Sie alle notwendigen Kenntnisse auf eine verständliche und bequeme Weise erhalten.

Versuchen Sie es selbst

Tipp:Für die Erstellung von 2-Spalten-Layout ändern Sie die Breite auf 50%. Für die Erstellung von 4-Spalten-Layout verwenden Sie 25%.

Tipp:Möchten Sie wissen, wie die @media-Regel funktioniert? Lesen Sie bitte unser CSS Medienabfragen Lernen Sie in diesem Kapitel mehr über relevante Kenntnisse.

Tipp:Eine modernere Methode zur Erstellung von Spaltenlayout ist die Verwendung von CSS Flexbox. Aber Internet Explorer 10 und frühere Versionen unterstützen es nicht. Wenn Unterstützung für IE6-10 erforderlich ist, verwenden Sie Float (wie oben gezeigt).

Für weitere Informationen zum Modul Flexible Box Layout lesen Sie bitte unser CSS Flexbox Tutorials.

Ungleich breite Spalten

Hauptinhalt (main content) ist der größte und wichtigste Teil Ihrer Website.

Es ist häufig der Fall, dass die Spaltenbreiten ungleich sind, da der größte Teil des Raums für den Hauptinhalt reserviert ist. Beiläufige Inhalte (wenn vorhanden) werden in der Regel als Alternative zur Navigation oder zur spezifischen Angabe von Informationen, die mit dem Hauptinhalt zusammenhängen, verwendet. Sie können die Breite frei ändern, beachten Sie jedoch, dass der Gesamtwert 100% betragen sollte:

Beispiel

.column {
  float: left;
{}
/* Linke und rechte Spalten */
.column.side {
  width: 25%;
{}
/* Mittlere Spalte */
.column.middle {
  width: 50%;
{}
/* Responsives Layout - Stackt die drei Spalten anstatt nebeneinander zu platzieren */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  {}
{}

Ergebnis:

Komplettes Referenzhandbuch für Websitetechnologien

Unser Referenzhandbuch deckt alle Aspekte der Websitetechnologien ab.

Dies umfasst die W3C-Standardtechnologien: HTML, CSS, XML. sowie weitere Technologien wie JavaScript, PHP, SQL.

Online-Beispieltesttool

Bei CodeW3C.com bieten wir Tausende von Beispielen.

Mit unserem Online-Editor können Sie diese Beispiele bearbeiten und mit dem Code experimentieren.

Schnelle und einfache Lernmethode

Ein Zeitraum ist wertvoll wie Gold, daher bieten wir Ihnen schnell und leicht verständliches Lernmaterial.

Hier können Sie alle notwendigen Kenntnisse auf eine verständliche und bequeme Weise erhalten.

Versuchen Sie es selbst

Fußzeile

Die Fußzeile befindet sich am Ende der Seite. Sie enthält in der Regel Informationen wie Urheberrechte und Kontaktinformationen:

Beispiel

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

Ergebnis:

Fußzeile

Versuchen Sie es selbst

Responsive Website-Layout

Durch die Verwendung dieser CSS-Codes haben wir eine anpassungsfähige Website-Layout erstellt, die zwischen zwei Spalten und einer vollständigen Breiten-Spalte wechselt, basierend auf der Bildschirmbreite:

Versuchen Sie es selbst