Maîtriser CSS : Conception de listes à rayures zébrées

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS. Le but de ce laboratoire est de vous aider à mieux comprendre comment styler et disposer les éléments HTML à l'aide de CSS. Vous allez apprendre à utiliser les sélecteurs, les propriétés et les valeurs CSS pour créer des pages web visuellement attrayantes et réactives.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) 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{{"Liste à rayures zébrées"}} css/colors -.-> lab-35257{{"Liste à rayures zébrées"}} css/backgrounds -.-> lab-35257{{"Liste à rayures zébrées"}} css/pseudo_classes -.-> lab-35257{{"Liste à rayures zébrées"}} end

Liste à rayures zébrées

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour créer une liste avec des couleurs d'arrière-plan alternées, utilisez les sélecteurs de pseudo-classes :nth-child(odd) ou :nth-child(even) pour appliquer une background-color différente aux éléments en fonction de leur position parmi les frères et sœurs. Cela peut être appliqué à divers éléments HTML tels que <div>, <tr>, <p>, <ol>, etc.

Voici un exemple de création d'une liste rayée avec des éléments <li> :

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

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

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Liste à rayures zébrées. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.