【CSS ——功能实现】电影院排座位（蓝桥杯真题-5133）【合集】

Rossy Yan

发布于 2025-02-16 19:20:39

4600

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

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

准备步骤

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

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

其中：

index.html 是主页面。
css/style.css 是需要补充样式的文件。

注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：

cd /home/project
wget https://labfile.oss.aliyuncs.com/courses/18213/02.zip && unzip 02.zip && rm 02.zip

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

目标效果

请在 css/style.css 文件中的 TODO 下补全样式代码，最终达到预期布局效果，需要注意：

座位区域和荧幕间隔 50px。
座位区域每一行包含 8 个座位。
第 2 列和第 6 列旁边都是走廊，需要和下一列间隔 30px，其他列都只需要间隔 10px。

完成后的效果如下：

要求规定

请勿修改 css/style.css 文件外的任何内容。
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

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

通关代码✔️

* {
  box-sizing: border-box;
}

body {
  background-color: #242333;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.container {
  perspective: 1000px;
  width: 470px;
}

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

.seat {
  background-color: #444451;
  height: 40px;
  width: 45px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.seat-area{
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.seat:nth-child(8n+2),
.seat:nth-child(8n+6){
  margin-right: 30px;
}
.seat{
  width: calc((100% - (7 * 10px) - 2 * 30px) / 8);
}

代码解析📑

一、HTML 部分

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电影院排座位</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- 屏幕区域 -->
      <div class="screen">阿凡达2</div>
      <!-- 座位区域 -->
      <div class="seat-area">
        <div class="seat"></div>
        <!-- 此处省略多个重复的 <div class="seat"></div> -->
        <div class="seat"></div>
      </div>
    </div>
  </body>
</html>

文档声明与字符编码：
- <!DOCTYPE html>：声明文档类型为 HTML5。
- <meta charset="UTF-8" />：设置文档的字符编码为 UTF - 8，确保页面能正确显示各种字符。
浏览器兼容性与视口设置：
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />：指定页面在 Internet Explorer 浏览器中以最新版本的渲染模式显示。
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />：设置视口宽度等于设备宽度，初始缩放比例为 1.0，实现页面在不同设备上的自适应显示。
页面标题与样式引用：
- <title>电影院排座位</title>：设置页面的标题。
- <link rel="stylesheet" href="./css/style.css" />：引用外部 CSS 文件 style.css，为页面添加样式。
页面结构：
- <div class="container">：作为整个布局的容器，为内部元素提供统一的样式和布局环境。
- <div class="screen">阿凡达2</div>：表示电影院的屏幕，显示电影名称 “阿凡达 2”。
- <div class="seat-area">：作为座位区域的容器，包含多个座位元素。
- 多个 <div class="seat"></div>：表示电影院的座位。

二、CSS 部分

* {
  box-sizing: border-box;
}

body {
  background-color: #242333;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.container {
  perspective: 1000px;
  width: 470px;
}

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

.seat {
  background-color: #444451;
  height: 40px;
  width: 45px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.seat-area{
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.seat:nth-child(8n+2),
.seat:nth-child(8n+6){
  margin-right: 30px;
}
.seat{
  width: calc((100% - (7 * 10px) - 2 * 30px) / 8);
}

全局样式：
- * { box-sizing: border-box; }：将所有元素的盒模型计算方式设置为 border-box，即元素的宽度和高度包含内容、内边距和边框，但不包含外边距，方便进行布局。
body 样式：
- background-color: #242333;：设置页面的背景颜色为深灰色。
- color: #fff;：设置页面文本颜色为白色。
- display: flex;：使用 Flexbox 布局，使子元素能够灵活排列。
- flex-direction: column;：设置子元素垂直排列。
- align-items: center;：使子元素在水平方向上居中对齐。
- justify-content: center;：使子元素在垂直方向上居中对齐。
- height: 100vh;：设置 body 元素的高度为视口高度的 100%。
- margin: 0;：去除 body 元素的默认外边距。
container 样式：
- perspective: 1000px;：设置透视效果，为后续的 3D 变换提供基础。
- width: 470px;：设置容器的宽度为 470px。
screen 样式：
- background-color: #fff;：设置屏幕的背景颜色为白色。
- height: 70px;：设置屏幕的高度为 70px。
- width: 100%;：设置屏幕的宽度为其父容器宽度的 100%。
- transform: rotateX(-45deg);：将屏幕沿 X 轴旋转 - 45 度，产生 3D 效果。
- box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7);：为屏幕添加阴影效果。
- color: #242333;：设置屏幕上文本的颜色为深灰色。
- text-align: center;：使屏幕上的文本在水平方向上居中对齐。
- line-height: 70px;：设置文本的行高等于屏幕的高度，使文本在垂直方向上居中对齐。
- font-size: 30px;：设置文本的字体大小为 30px。
seat 初始样式：
- background-color: #444451;：设置座位的背景颜色为深灰色。
- height: 40px;：设置座位的高度为 40px。
- width: 45px;：初始设置座位的宽度为 45px，后续会根据布局重新计算。
- border-top-left-radius: 10px; 和 border-top-right-radius: 10px;：设置座位顶部的左右圆角半径为 10px，使座位呈现圆角效果。
seat-area 样式：
- margin-top: 50px;：设置座位区域与屏幕之间的间隔为 50px。
- display: flex;：使用 Flexbox 布局，使座位元素能够水平排列。
- flex-wrap: wrap;：允许座位元素在一行排不下时换行。
- gap: 10px;：设置座位元素之间的默认间隔为 10px。
特定列座位样式：
- seat:nth-child(8n+2), .seat:nth-child(8n+6)：选择每行的第 2 列和第 6 列的座位。
- margin-right: 30px;：为这两列的座位添加 30px 的右边距，作为走廊。
重新计算 seat 宽度：
- width: calc((100% - (7 * 10px) - 2 * 30px) / 8);：根据父容器宽度、普通间隔和走廊间隔，动态计算每个座位的宽度，确保 8 个座位能正好排满一行。

三、工作流程▶️

HTML 构建页面结构：创建包含屏幕和座位区域的 HTML 结构，为每个元素添加相应的类名，以便后续应用 CSS 样式。
CSS 应用样式：
- 首先设置全局样式和 body 样式，确定页面的整体背景、文本颜色和布局方式。
- 为 container 和 screen 元素添加样式，设置容器的宽度和透视效果，以及屏幕的外观和 3D 效果。
- 为 seat 元素设置初始样式，包括背景颜色、高度、宽度和圆角。
- 为 seat-area 元素添加样式，设置与屏幕的间隔、使用 Flexbox 布局和元素之间的默认间隔。
- 选择特定列的座位，添加额外的右边距作为走廊。
- 重新计算 seat 元素的宽度，确保座位能正确排列。
浏览器渲染页面：浏览器根据 HTML 结构和 CSS 样式，将页面渲染为包含屏幕和座位布局的电影院界面。