Создайте привлекательные макеты расположения мест в кинотеатре с использованием CSS

Введение

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

👀 Предпросмотр

Предпросмотр расположения мест в кинотеатре

🎯 Задачи

В этом проекте вы научитесь:

Как создать зону посадки с требуемым количеством мест и расстояниями между ними
Как добавить экран в макет и отделить его от зоны посадки
Как применить стили CSS для достижения желаемого визуального вида макета кинотеатра

🏆 Достижения

После завершения этого проекта вы сможете:

Использовать CSS для создания гибкого макета зоны посадки
Разместить и стилизовать элемент экрана
Применить конкретные правила по расстояниям для достижения желаемого макета
Показать свои навыки в разработке и реализации сложных структур макета, что является важным навыком для веб-разработки

Настроить проект

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта, которая содержит следующие файлы и директории:

├── css
│   └── style.css
└── index.html

Здесь:

index.html - главная страница.
css/style.css - файл, в котором нужно добавить необходимые стили.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Добавить экран

В этом шаге вы научитесь добавлять экран в макет кинотеатра. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте файл css/style.css в вашем редакторе кода.
Внутри класса .screen добавьте следующие свойства CSS:
```
.screen {
  background-color: #fff;
  height: 70px;
  width: 100%;
  transform: rotateX(-45deg);
  box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);
  color: #242333;
  text-align: center;
  line-height: 70px;
  font-size: 30px;
}
```
Это будет стилизовать экран, задавая его размер, цвет и добавляя трехмерный эффект вращения и тень.

Настроить зону посадки

В этом шаге вы научитесь настраивать зону посадки в кинотеатре. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте файл css/style.css в вашем редакторе кода.
Внутри класса .seat - area добавьте следующие свойства CSS:
```
.seat - area {
 display: flex;
 flex - wrap: wrap;
 margin - top: 40px;
}
```
Это создаст гибкий макет для зоны посадки, с местами расположенными в рядах.
Далее, задайте стиль для класса .seat и добавьте следующие свойства CSS:
```
.seat {
 background - color: #444451;
 height: 40px;
 width: 45px;
 border - top - left - radius: 10px;
 border - top - right - radius: 10px;
 margin - right: 10px;
 margin - top: 10px;
}
```
Это будет стилизовать отдельные места, задавая их размер, цвет и добавляя скругленные углы.
Чтобы создать нужный интервал между местами, добавьте следующие правила CSS:
```
.seat:nth - child(8n + 2) {
 margin - right: 30px;
}
```

.seat:nth - child(8n + 6) { margin - right: 30px; }

.seat:nth - child(8n + 0) { margin - right: 0; }


Это добавит 30 - пиксельный зазор справа от 2 - го и 6 - го столбцов (рядом с проходами), и 10 - пиксельный зазор между остальными местами.

Ваш макет кинотеатра теперь готов! Обновите окно браузера, отображающее веб - страницу. Готовый результат выглядит так:

![Завершенный макет расположения мест в кинотеатре](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/css/project-movie-theater-seat-arrangement/lab-movie-theater-seat-arrangement/ru/../assets/1.png)

Резюме

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

Расположение мест в кинотеатре