Мастерство в CSS: Вертикальный паттерн полос на фоне

Введение

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

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

Паттерн полос на фоне

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

Этот код создает вертикальный паттерн полос на белом фоне.

Для создания паттерна:

Установите свойство background-color на белый.
Используйте background-image со значением linear-gradient() для создания вертикальной полосы.
Установите свойство background-size, чтобы указать размер каждой полосы.
Установите background-repeat на repeat, чтобы позволить паттерну заполнить элемент.

Обратите внимание, что фиксированные width и height элемента служат только для демонстрационных целей.

Вот пример кода:

<div class="stripes"></div>

.stripes {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
  background-size: 60px 60px;
  background-repeat: repeat;
}

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

Резюме

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