Responsives Layout mit Sidebar | CSS-Programmier-Tutorial

Einführung

In diesem Lab werden wir die Welt der CSS-Programmierung erkunden. Das Hauptziel dieses Labs ist es, praktische Erfahrungen bei der Erstellung eines responsiven Layouts mit einer Sidebar zu vermitteln. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie die Eigenschaften display: grid und minmax() verwendet werden, um ein effektives und visuell ansprechendes Layout zu erstellen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 100% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein responsives Layout mit einem Inhaltsbereich und einer Sidebar zu erstellen, verwenden Sie display: grid auf dem Elterncontainer, minmax() für die zweite Spalte (Sidebar), um es zwischen 150px und 20% aufnehmen zu lassen, und 1fr für die erste Spalte (Hauptinhalt), um den Rest des verbleibenden Raums zu belegen. Hier ist ein Beispiel für HTML- und CSS-Code:

<div class="container">
  <main>Dieses Element hat eine Größe von 1fr.</main>
  <aside>Min: 150px / Max: 20%</aside>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;
}

main,
aside {
  padding: 12px;
  text-align: center;
}

main {
  background: #d4f2c4;
}

aside {
  background: #81cfd9;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Responsives Layout mit Sidebar" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.