Мастерство в CSS: дизайн списка с полосами как у зебры

Введение

В этом практическом занятии мы изучим основы программирования на CSS. Цель этого практического занятия - помочь вам лучше понять, как стилизовать и разместить элементы HTML с использованием CSS. Вы научитесь использовать селекторы, свойства и значения CSS для создания визуально привлекательных и адаптивных веб-страниц.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic 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{{"Список с полосами как у зебры"}} css/colors -.-> lab-35257{{"Список с полосами как у зебры"}} css/backgrounds -.-> lab-35257{{"Список с полосами как у зебры"}} css/pseudo_classes -.-> lab-35257{{"Список с полосами как у зебры"}} end

Список с полосами как у зебры

В ВМ уже предоставлены index.html и style.css.

Для создания списка с чередующимся цветом фона используйте псевдо-классовые селекторы :nth-child(odd) или :nth-child(even) для применения различных значений background-color к элементам в зависимости от их позиции среди соседей. Это можно применить к различным HTML-элементам, таким как <div>, <tr>, <p>, <ol> и т.д.

Вот пример создания списка с полосами для элементов <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;
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по списку с полосами как у зебры. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.