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.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

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.