Dominando CSS: Diseño de lista con rayas de cebra

Introducción

En este laboratorio, exploraremos los fundamentos de la programación CSS. El objetivo de este laboratorio es ayudarte a comprender mejor cómo dar estilo y diseños a los elementos HTML utilizando CSS. Aprenderás cómo utilizar los selectores, propiedades y valores de CSS para crear páginas web visualmente atractivas y responsivas.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Lista con rayas de cebra

index.html y style.css ya se han proporcionado en la máquina virtual.

Para crear una lista con colores de fondo alternados, utiliza los selectores pseudo-clase :nth-child(odd) o :nth-child(even) para aplicar un diferente background-color a los elementos según su posición entre los hermanos. Esto se puede aplicar a varios elementos HTML como <div>, <tr>, <p>, <ol>, etc.

A continuación, se muestra un ejemplo de cómo crear una lista con rayas con elementos <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;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de la Lista con rayas de cebra. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.