电影院座位布局

简介

在这个项目中，你将学习如何使用 CSS 为电影院创建座位安排。目标是设计一个布局，其中包括一个屏幕和一个具有特定间距要求的座位区。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何设置具有所需座位数量及其间距的座位区
• 如何在布局中添加屏幕并将其与座位区分开
• 如何应用 CSS 样式以实现电影院布局所需的视觉外观

🏆 成果

完成此项目后，你将能够：

• 使用 CSS 为座位区创建灵活的布局
• 定位并设置屏幕元素的样式
• 应用特定的间距规则以实现所需的布局
• 展示你在设计和实现复杂布局结构方面的技能，这是网页开发的一项基本技能

Skills Graph

设置项目

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹，其中包含以下文件和目录：

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

这里：

• index.html 是主页。
• css/style.css 是你需要添加所需样式的文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，在虚拟机顶部打开 “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;
   }

这将对屏幕进行样式设置，包括设置其大小、颜色，并添加 3D 旋转效果和投影。

设置座位区

在这一步中，你将学习如何为电影院设置座位区。按照以下步骤完成此步骤：

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;
}

这将在第 2 列和第 6 列（靠近过道）的右侧添加 30 像素的间距，而在其他座位之间添加 10 像素的间距。

你的电影院布局现在完成了！刷新显示网页的浏览器窗口。最终结果如下：

![完成的电影院座位布局](https://file.labex.io/namespace/718bace8-27a3-4200-a588-dde4041ceeb9/css/project-movie-theater-seat-arrangement/lab-movie-theater-seat-arrangement/zh/../assets/1.png)

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。