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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/BasicStylingGroup -.-> css/text_styling("Text Styling") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/grid_layout("Grid Layout") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35234{{"Responsives Layout mit Sidebar"}} css/colors -.-> lab-35234{{"Responsives Layout mit Sidebar"}} css/text_styling -.-> lab-35234{{"Responsives Layout mit Sidebar"}} css/margin_and_padding -.-> lab-35234{{"Responsives Layout mit Sidebar"}} css/width_and_height -.-> lab-35234{{"Responsives Layout mit Sidebar"}} css/display_property -.-> lab-35234{{"Responsives Layout mit Sidebar"}} css/grid_layout -.-> lab-35234{{"Responsives Layout mit Sidebar"}} css/backgrounds -.-> lab-35234{{"Responsives Layout mit Sidebar"}} end

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.