第十四届蓝桥杯全国软件和信息技术专业人才大赛（Web 应用开发）

本文链接：https://blog.youkuaiyun.com/m0_73627109/article/details/135405495

试题列表上（01~05题）

01 电影院排座位（5 分）

介绍

随着人们生活水平的日益提升，电影院成为了越来越多人的休闲娱乐，周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近日，又有⼀个电影院正在做着开张前期的准备，小蓝作为设计工程师，需要对电影院的座位进行布局设计。

本题需要在已提供的基础项目中，使⽤ CSS 完成页面中电影院座位布局。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css

│ └── style.css

└── index.html

其中：

index.html 是主页面。

css/style.css 是需要补充样式的⽂件。

在浏览器中预览 index.html ，显示如下所示：

目标

请在 css/style.css 文件中的 TODO 下补全样式代码，最终达到预期布局效果，需要注意：
   座位区域和荧幕间隔 50px。
   座位区域每一行包含 8 个座位。
   第 2 列和第 6 列旁边都是走廊，需要和下一列间隔 30px，其他列都只需要间隔 10px。
完成后的效果如下：

规定

请勿修改 css/style.css 文件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id
名、图片名等，以免造成判题⽆法通过。
完成答题后，考生需将题目对应代码文件夹压缩成 zip 格式后上传提交，其他压缩包格式为 0 分。

判分标准

本题完全实现题目目标得满分，否则得 0 分。

解题结果

/* TODO：待补充代码 */
.seat-area {
  /* 座位区域和荧幕间隔 50px。 */
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
}
/* 8个座位 */
/* 第 2 列和第 6 列旁边都是走廊，需要和下一列间隔 30px，其他列都只需要间隔 10px。 */
.seat {
  margin-left: 10px;
  margin-bottom:  10px;
}
.seat:nth-child(8n + 1) {
  margin-left: 0;
}
.seat:nth-child(8n + 3),
.seat:nth-child(8n + 7)
{
  margin-left: 30px;
}