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

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35244{{"Паттерн полос на фоне"}} css/colors -.-> lab-35244{{"Паттерн полос на фоне"}} css/width_and_height -.-> lab-35244{{"Паттерн полос на фоне"}} css/backgrounds -.-> lab-35244{{"Паттерн полос на фоне"}} end

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

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