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.

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{{"Lista con rayas de cebra"}} css/colors -.-> lab-35257{{"Lista con rayas de cebra"}} css/backgrounds -.-> lab-35257{{"Lista con rayas de cebra"}} css/pseudo_classes -.-> lab-35257{{"Lista con rayas de cebra"}} end

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.