当前位置：首页 > news >正文

css蓝桥杯--电影院排座位

news 文章来源：https://blog.csdn.net/m0_58065010/article/details/131098577 2025/1/18 18:19:09

一、介绍

随着⼈们⽣活⽔平的⽇益提升，电影院成为了越来越多的⼈休闲娱乐，周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近⽇，⼜有⼀个电影院正在做着开张前期的准备，⼩蓝作为设计⼯程师，需要对电影院的座位进⾏布局设计。
本题需要在已提供的基础项⽬中，使⽤ CSS 完成⻚⾯中电影院座位布局。

二、准备

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

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

其中：

index.html 是主⻚⾯。
css/style.css 是需要补充样式的⽂件。

在浏览器中预览 index.html ，显示如下所示：
在这里插入图片描述

三、⽬标

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

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

完成后的效果如下：

在这里插入图片描述

四、代码

index.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 class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div><div class="seat"></div></div></div></body>
</html>

css/style.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;
}/* TODO：待补充代码 */

五、知识点

使用:nth-child(an)时，n虽然可以是等于0，1，2，3… 但是nth-child没有0号元素只有1号元素，故an的实际值为 a 2a 3a 而不是0 a 2a 3a

六、完成

/* 作为区域和屏幕间隔50px  */
.screen{margin-bottom: 50px;
}/* 将座位变为flex布局且换行 */
.seat-area{display: flex;flex-wrap: wrap;
}
/* 让每个座位距离右边10px */
.seat{margin-right: 10px;/* 下面这一行代码题目没要求写 但是如果写了感觉更符合效果图 */margin-bottom:10px  
}
/* 让第二列和第六列距离右边30px  ---》会覆盖10px */
.seat:nth-child(8n+2),
.seat:nth-child(8n+6){margin-right: 30px;
}
/* 让最后一列距离右边为0 */
.seat:nth-child(8n){margin-right: 0px;
}

css蓝桥杯--电影院排座位

目录一、介绍二、准备三、⽬标四、代码五、知识点六、完成一、介绍随着⼈们⽣活⽔平的⽇益提升，电影院成为了越来越多的⼈休闲娱乐，周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近⽇，⼜有⼀个电影院正在做着开张前…...

编程日记 2023/6/9 8:46:37

c++学习——多态

多态 **多态的语法****多态的底层原理图****多态案1——计算机类****纯虚函数和抽象类****多态案例2——饮品****虚析构和纯虚析构****多态案例3—— 电脑组装** 多态是C面向对象三大特性之一多态分为两类静态多态:函数重载和运算符重载属于静态多态，复用函数名动…...

编程日记 2023/6/9 8:41:36

Java SPI机制及原理详解

前言 Java SPI (Service Provider Interface) 是一种重要的组件化方式，它可以让程序在运行时动态地装载一些实现模块，从而增强程序的可扩展性和灵活性。本文将详细介绍 Java SPI 的基本概念、原理以及使用方法。 1. 什么是Java SPI Java SPI 是一种标准…...

编程日记 2023/6/9 8:36:35

不压缩打包layui

手动打包下载layui源码（当前版本2.6.4），并解压缩下载地址：layui gitee 安装nodejs（v10.24.1） 下载链接 windows-x64 安装cnpm npm install -g cnpm -registryhttps://registry.npm.taobao.org全局安…...

编程日记 2023/6/9 8:31:34

过去、现在及未来

人生最邪恶的地方在于，只能年轻一次回顾下我毫无规划的，且已经消耗掉的青春一：过去 19岁，进入大学，兼职、玩儿、暧昧 20-21岁，初创软件公司打杂、恋爱、暧昧 22、23、24岁，上海&#xff…...

编程日记 2023/6/9 8:26:33

leetcode701. 二叉搜索树中的插入操作(java)

二叉搜索树中的插入操作 leetcode701. 二叉搜索树中的插入操作题目描述递归解题解题思路代码演示二叉树专题 leetcode701. 二叉搜索树中的插入操作原题链接： 来源：力扣（LeetCode） 链接：https://leetcode.cn/problem…...

编程日记 2023/6/9 8:21:32

Docker的容器管理操作

1、创建容器容器创建：就是将镜像加载到容器的过程。创建容器时如果没有指定容器名称，系统会自动创建一个名称。新创建的容器默认处于停止状态，不运行任何程序，需要在其中发起一个进程来启动容器。 docker create创建的容器…...

编程日记 2023/6/9 8:16:28

计算机组成原理——中央处理器

文章目录 **一 CPU的功能和基本结构****1 CPU的功能****2 [基本结构](http://t.csdn.cn/bpCt3)****2.1 运算器****2.2 控制器** **二指令执行过程****1 指令周期****2 指令周期的数据流****2.1 取指周期****2.2 间址周期****2.3 执行周期****2.4 中断周期** **3 指令的执行方案…...

编程日记 2023/6/9 8:11:27

tidb变更大小写敏感问题的总结

作者： sustyle 原文来源： https://tidb.net/blog/2a72bc13 1 背景近期，我们线上的tidb集群就遇到一个变更忽略大小写的需求，本来以为一个改表工单就解决了，但是业务反馈工单完成后，大小写仍旧敏感&…...

编程日记 2023/6/9 8:06:25

法规标准-UN R158标准解读

UN R158是做什么的？ UN R158全名为针对驾驶员识别车辆后方弱势道路使用者，联合国对倒车系统和机动车的统一规定，该法规涉及批准倒车和机动车辆的装置，主要为保证倒车时避免碰撞，方便驾驶员观察了解车辆后部人员和物体…...

编程日记 2023/6/9 8:01:25

160个CrackMe之002

这道题就很简单有了第一道题目的支持我们就能做首先我们先要下载Msvbvm50.dll Msvbvm50.dll下载_Msvbvm50.dll最新版下载[修复系统丢失文件]-下载之家然后我们可以运行程序了比之前那个还简单就是输入然后比对报错或者成功开始逆向分析先去常量中进行查找找…...

编程日记 2023/6/9 7:56:24

3. 响应状态码及Response对象的status_code属性

3. 响应状态码及Response对象的status_code属性文章目录 3. 响应状态码及Response对象的status_code属性1. 响应状态码2. 响应状态码共分为5种类型2.1 1xx（临时响应）2.2 2xx （成功）2.3 3xx （重定向）2.4 4x…...

编程日记 2023/6/9 7:51:23

看表~按照内容类型排列的 MIME 类型列表类型/子类型扩展名application/envoyevyapplication/fractalsfifapplication/futuresplashsplapplication/htahtaapplication/internet-property-streamacxapplication/mac-binhex40hqxapplication/msworddocapplication/msworddotappl…...

编程日记 2023/6/9 7:46:22

SpringBoot项目登录并接入MFA二次认证

MFA多因素认证(Multi-Factor Authentication )： 一些需要身份认证的服务（如网站），为了提升安全性，通常会在账号密码登录成功后，要求用户进行第二种身份认证，以确保是正确用户登录，避…...

编程日记 2023/6/9 7:41:21

算法与数据结构（三）

一、堆 1，堆结构就是用数组实现的完全二叉树结构根节点的左孩子的下标为：2i1,右孩子为2i2。两个孩子的父节点为(i-1)/2向下取整 2，完全二叉树中如果每棵子树的最大值都在顶部就是大根堆从下往上将孩子与父节点进行比较，如果子叶…...

编程日记 2023/6/9 7:36:20

亚马逊云科技出海日，让数字经济出海扩展到更多行业和领域

数字化浪潮之下，中国企业的全球化步伐明显提速。从“借帆出海”到“生而全球化”，中国企业实现了从传统制造业“中国产品”出口，向创新“中国技术”和先导“中国品牌”的逐步升级。作为全球云计算的开创者与引领者，亚马逊云科技…...

编程日记 2023/6/9 7:31:19

Pb协议的接口测试

【摘要】 Protocol Buffers 是谷歌开源的序列化与反序列化框架。它与语言无关、平台无关、具有可扩展的机制。用于序列化结构化数据，此工具对标 XML ，支持自动编码，解码。比 XML 性能好，且数据易于解析。更多有关工具的介绍可参考…...

编程日记 2023/6/9 7:26:18

2. 分布式文件系统 HDFS

2. 分布式文件系统 HDFS 1. 引入HDFS【面试点】问题一：如果一个文件中有 10 个数值，一行一个，并且都可以用 int 来度量。现在求 10 个数值的和思路： 逐行读取文件的内容把读取到的内容转换成 int 类型把转换后的数据进行相加…...

编程日记 2023/6/9 7:21:16

借助金融科技差异化发展，不一样的“破茧”手法

撰稿 | 多客来源 | 贝多财经民营银行的诞生顺应了普惠金融的要求，承担着支持民营经济、服务小微的历史使命。经过近年来的发展，19家民营银行形成了特色化、差异化的发展模式，并用各自本领实践普惠金融的初心。本文从多家民营银行在核心技…...

编程日记 2023/6/9 7:16:15

typescript中type、interface的区别

一、概念定义 interface：接口在TS 中主要用于定义【对象类型】，可以对【对象】的形状进行描述。type ：类型别名为类型创建一个新名称，它并不是一个类型，只是一个别名。二，区别 interface： …...

编程日记 2023/6/9 7:11:14

Ingress详解

Ingress Service对集群外暴露端口两种方式，这两种方式都有一定的缺点： NodePort ：会占用集群集群端口，当集群服务变多时，缺点明显LoadBalancer：每个Service都需要一个LB，并且需要k8s之外设备支…...

编程日记 2023/6/9 7:06:13

【递归算法的Java实现及其应用】

文章目录递归算法概述递归算法的实现步骤递归算法的Java实现递归算法的底层工作原理递归算法的底层代码讲解（优先级高）递归算法的实际应用场景递归算法在场景中解决的问题递归算法的优点和缺点总结递归算法概述递归算法是一种通过调用自身来解决问题…...

编程日记 2023/6/9 7:01:12

2023年度第四届全国大学生算法设计与编程挑战赛（春季赛）

目录 2023年度第四届全国大学生算法设计与编程挑战赛（春季赛）1、A2、Bx3、Cut4、Diff5、EchoN6、Farmer7、GcdGame8、HouseSub9、IMissYou!10、Jargonless 2023年度第四届全国大学生算法设计与编程挑战赛（春季赛） 1、A 题目描述…...

编程日记 2023/6/9 6:56:11

如何用PHP获取各大电商平台的数据

PHP获取API数据是指使用PHP语言从web服务中提取数据。API是指应用程序接口，它允许应用程序之间进行交互和通信，并且允许一个应用程序从另一个应用程序获取数据。PHP是一种网站开发语言，它可以使用多种方式来获取API数据。在PHP中&#xff0…...

编程日记 2023/6/9 6:51:09

一站式完成车牌识别任务：从模型优化到端侧部署

交通领域的应用智能化不断往纵深发展，其中最为成熟的车牌识别早已融入人们的日常生活之中，在高速公路电子收费系统、停车场等场景中随处可见。一些企业在具体业务中倾向采用开源方案降低研发成本，但现有公开的方案中少有完成端到端的车牌应用…...

编程日记 2023/6/9 6:46:08

Linux4.8Nginx Rewrite

文章目录计算机系统5G云计算第六章 LINUX Nginx Rewrite一、Nginx Rewrite 概述1.常用的Nginx 正则表达式2.rewrite和location3.location4.实际网站使用中，至少有三个匹配规则定义5.rewrite6.rewrite 示例计算机系统 5G云计算第六章 LINUX Nginx Rewrite 一、…...

编程日记 2023/6/9 6:41:07

DHT11温湿度传感器

接口定义传感器通信 DHT11采用简化的单总线通信。单总线仅有一根数据线（SDA），通信所进行的数据交换、挂在单总线上的所有设备之间进行信号交换与传递均在一条通讯线上实现。单总线上必须有一个上拉电阻（Rp）以实现单…...

编程日记 2023/6/9 6:36:06

RestTemplate超简单上手

目录 1.什么是RestTemplate? 2.RestTemplate的使用 2.1spring环境下注意1：RestTemplate中发送请求execute()和exchange()方法的区别 execute()方式 exchange()方式二者的区别注意2：进阶配置——底层HTTP客户端 2.2非spring环境下 1.什么是R…...

编程日记 2023/6/9 6:31:05

监控系统设计原则及实现目标

1.1.1.1 1 ．完善的设计理念： 包括符合国际发展潮流的特性化设计，完整的安防监控及围墙周界报警系统的布线、设备安装、调试、测试、验收的“交钥匙”工程管理制度，以及符合标准的质量控制体系。 1.1.1.2 设计原则&#xf…...

编程日记 2023/6/9 6:26:04

VulnHub项目：MONEYHEIST: CATCH US IF YOU CAN

靶机名称： MONEYHEIST: CATCH US IF YOU CAN 地址：MoneyHeist: Catch Us If You Can ~ VulnHub 这个系列是一部剧改编，还是挺好看的，大家有兴趣可以去看看！ 废话不多说，直接上图开始！ 渗透…...

编程日记 2023/6/9 6:21:04

沈阳网站建设开发维护/百度爱采购推广一个月多少钱

PHP-FPM早期版本的 PHP 并没有内置的 WEB 服务器，而是提供了 SAPI(Server API)给第三方做对接。现在非常流行的 php-fpm 就是通过 FastCGI 协议来处理 PHP 与第三方 WEB 服务器之间的通信。 (推荐学习：swoole视频教程)比如 Nginx php-fpm 的组合&#x…...

编程日记 2025/1/18 17:18:12

招全国代理经销/台州seo网站排名优化

第一类：属性值为true可falseandroid:layout_centerHrizontal 水平居中 android:layout_centerVertical 垂直居中 android:layout_centerInparent 相对于父元素完全居中 android:layout_alignParentBottom 贴紧父元素的下边缘 android:la…...

编程日记 2025/1/18 16:18:15

门户网站开发用什么框架好/参考网是合法网站吗?

摘要：机器人技术是当今世界备受关注的前沿课题,伴随着近年来人工智能技术不断的发展,机器人技术也成为了一个令人浮想联翩的技术领域。本文以大家喜闻乐见的中国传统的非完备信息二人军棋计算机博弈作为研究对象,军棋博弈的每方拥有25个棋子、12种类型棋子,每个棋子…...

编程日记 2025/1/18 14:29:27

写作网站不屏蔽/宁波seo快速优化平台

1. 新建 axiosTool.js 文件，设置请求拦截和处理的逻辑 import Vue from vue import axios from axios //取消请求 let CancelToken axios.CancelToken //设置默认请求头，如果不需要可以取消这一步 axios.defaults.headers {X-Requested-With: XMLHttpR…...

编程日记 2025/1/18 13:16:07

wordpress好看的自定义页面模版/湖南网站seo推广

我用的是沙箱环境做的测试, 步骤如下: 获取配置信息点击进入网站, 当然在此之前要先申请个沙箱应用下图是获取到 APPID, 后面会用到下面是获取到公钥和私钥, 由于我之前设置过公钥, 如果是刚刚创建的沙箱应用, 那么可能和我的页面稍有不同, 但是只需要按照提示操作获取公…...

编程日记 2025/1/18 12:35:34

互联网推广加盟/搜索引擎优化seo

一、Step download timeout (120 seconds) 这是一个经常会遇到的问题，解决得办法走以下步骤： 1、修改run time setting中的请求超时时间，增加到600s,其中有三项的参数可以一次都修改了，HTTP-request connect timeout&#xff0…...

编程日记 2025/1/18 8:53:11

目录