Gleichmäßig Verteilte Kinder: CSS-Meisterei

Einführung

In diesem Lab werden wir die Grundlagen der CSS-Programmierung erkunden und lernen, wie man Styles auf HTML-Dokumente anwendet. Durch eine Reihe von praktischen Übungen lernen Sie, wie man CSS-Regeln erstellt und modifiziert, Selectoren verwendet, um bestimmte Elemente anzusprechen, und Styles auf Text, Hintergrund und Rahmen anwendet. Am Ende dieses Labs werden Sie eine solide Grundlage in CSS haben und es verwenden können, um visuell ansprechende Webseiten zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/selectors -.-> lab-35196{{"Gleichmäßig Verteilte Kinder"}} css/display_property -.-> lab-35196{{"Gleichmäßig Verteilte Kinder"}} css/flexbox -.-> lab-35196{{"Gleichmäßig Verteilte Kinder"}} end

Gleichmäßig Verteilte Kinder

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

Um die Kinderelemente innerhalb eines Elterntelements gleichmäßig zu verteilen, verwenden Sie das Flexbox-Layout, indem Sie die display-Eigenschaft des Elterntelements auf flex setzen. Um die Kinder horizontal mit gleichen Abständen zu verteilen, verwenden Sie justify-content: space-between. Um die Kinder mit Abstand dazwischen zu verteilen, verwenden Sie justify-content: space-around. Hier ist ein Beispiel:

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

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 "Gleichmäßig Verteilte Kinder" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.