Meisterklasse CSS: Design einer streifenförmigen Liste

Einführung

In diesem Lab werden wir die Grundlagen der CSS-Programmierung erkunden. Ziel dieses Labs ist es, Ihnen zu helfen, das Styling und die Gestaltung von HTML-Elementen mit CSS besser zu verstehen. Sie werden lernen, wie Sie CSS-Selektoren, -Eigenschaften und -Werte verwenden, um visuell ansprechende und responsive Webseiten zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") subgraph Lab Skills css/selectors -.-> lab-35257{{"Streifenförmige Liste"}} css/colors -.-> lab-35257{{"Streifenförmige Liste"}} css/backgrounds -.-> lab-35257{{"Streifenförmige Liste"}} css/pseudo_classes -.-> lab-35257{{"Streifenförmige Liste"}} end

Streifenförmige Liste

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

Um eine Liste mit abwechselnden Hintergrundfarben zu erstellen, verwenden Sie die pseudo-klassenselektoren :nth-child(odd) oder :nth-child(even), um eine unterschiedliche background-color auf Elemente basierend auf ihrer Position unter den Geschwistern anzuwenden. Dies kann auf verschiedene HTML-Elemente wie <div>, <tr>, <p>, <ol> usw. angewendet werden.

Hier ist ein Beispiel dafür, wie man eine streifenförmige Liste mit <li>-Elementen erstellt:

<ul>
  <li>Element 01</li>
  <li>Element 02</li>
  <li>Element 03</li>
  <li>Element 04</li>
  <li>Element 05</li>
</ul>

li:nth-child(odd) {
  background-color: #999;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, 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 "Streifenförmige Liste" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.