用 CSS 创建引人入胜的电影院座位布局

介绍

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

👀 预览

电影院座位布局预览

🎯 任务

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

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

🏆 成果

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

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

设置项目

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

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

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

这里：

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

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

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

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

设置座位区

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

在你的代码编辑器中打开 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; }


这将在第 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 中练习更多实验以提升你的技能。