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

Введение

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

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

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.