Dominando CSS: Design de Lista com Faixas Zebradas

Introdução

Neste laboratório, exploraremos os fundamentos da programação CSS. O objetivo deste laboratório é ajudá-lo a obter uma melhor compreensão de como estilizar e formatar elementos HTML usando CSS. Você aprenderá como usar seletores, propriedades e valores CSS para criar páginas web visualmente atraentes e responsivas.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Lista com Faixas Zebradas

index.html e style.css já foram fornecidos na VM.

Para criar uma lista com cores de fundo alternadas, use os seletores de pseudo-classe :nth-child(odd) ou :nth-child(even) para aplicar um background-color diferente aos elementos com base em sua posição entre os irmãos. Isso pode ser aplicado a vários elementos HTML, como <div>, <tr>, <p>, <ol>, etc.

Aqui está um exemplo de como criar uma lista com faixas usando 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;
}

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório Lista com Faixas Zebradas. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.