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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

Skills Graph

Настройка проекта

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

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

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

Здесь:

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

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

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

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

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

1. Откройте файл css/style.css в вашем редакторе кода.

2. Внутри класса .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;
   }

   Это будет стилизовать экран, задавая его размер, цвет и добавляя трехмерный эффект вращения и тень.

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

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

1. Откройте файл css/style.css в вашем редакторе кода.

2. Внутри класса .seat - area добавьте следующие свойства CSS:

   .seat - area {
    display: flex;
    flex - wrap: wrap;
    margin - top: 40px;
   }

   Это создаст гибкий макет для зоны посадки, с местами расположенными в рядах.

3. Далее, задайте стиль для класса .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;
   }

   Это будет стилизовать отдельные места, задавая их размер, цвет и добавляя скругленные углы.

4. Чтобы создать нужный интервал между местами, добавьте следующие правила 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, чтобы улучшить свои навыки.