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

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

news 2026/3/27 5:45:21

目录

  • 一、介绍
  • 二、准备
  • 三、⽬标
  • 四、代码
  • 五、知识点
  • 六、完成

一、介绍

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

二、准备

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

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

其中：

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

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

三、⽬标

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

  1. 座位区域和荧幕间隔 50px。
  2. 座位区域每⼀⾏包含 8 个座位。
  3. 第 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蓝桥杯--电影院排座位

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

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

c++学习——多态

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

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

Java SPI机制及原理详解

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

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

不压缩打包layui

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

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

过去、现在及未来

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

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

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

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

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

Docker的容器管理操作

1、创建容器 容器创建&#xff1a;就是将镜像加载到容器的过程。 创建容器时如果没有指定容器名称&#xff0c;系统会自动创建一个名称。 新创建的容器默认处于停止状态&#xff0c;不运行任何程序&#xff0c;需要在其中发起一个进程来启动容器。 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变更大小写敏感问题的总结

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

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

法规标准-UN R158标准解读

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

编程日记 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&#xff08;临时响应&#xff09;2.2 2xx &#xff08;成功&#xff09;2.3 3xx &#xff08;重定向&#xff09;2.4 4x…...

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

MIME 类型列表 03

看表~按照内容类型排列的 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 )&#xff1a; 一些需要身份认证的服务&#xff08;如网站&#xff09;&#xff0c;为了提升安全性&#xff0c;通常会在账号密码登录成功后&#xff0c;要求用户进行第二种身份认证&#xff0c;以确保是正确用户登录&#xff0c;避…...

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

算法与数据结构（三）

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

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

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

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

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

Pb协议的接口测试

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

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

2. 分布式文件系统 HDFS

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

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

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

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

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

typescript中type、interface的区别

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

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

JPEXS Free Flash Decompiler技术文档贡献者名单：作者与编辑

JPEXS Free Flash Decompiler技术文档贡献者名单&#xff1a;作者与编辑 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款强大的开源Flash反编译工具&…...

编程新知 2026/3/27 5:24:45

Qwen3.5-9B+OpenClaw组合方案：3类高性价比自动化场景实测

Qwen3.5-9BOpenClaw组合方案&#xff1a;3类高性价比自动化场景实测 1. 为什么选择这个组合&#xff1f; 去年夏天&#xff0c;我花了整整两周时间在本地部署各种开源大模型&#xff0c;试图找到一个既能在预算内运行、又能稳定执行自动化任务的方案。经过反复测试&#xff0…...

编程新知 2026/3/27 4:17:48

7个高级配置技巧：打造极致Markdown预览体验

7个高级配置技巧&#xff1a;打造极致Markdown预览体验 【免费下载链接】vscode-markdown-preview-enhanced One of the "BEST" markdown preview extensions for Visual Studio Code 项目地址: https://gitcode.com/gh_mirrors/vs/vscode-markdown-preview-enhanc…...

编程新知 2026/3/27 3:51:34

使用现代 Java 技术栈构建企业级 AI 应用

使用现代 Java 技术栈构建企业级 AI 应用 引言 随着人工智能技术的快速发展&#xff0c;企业级 AI 应用的需求也迅速增长。Java 作为一门成熟的企业级编程语言&#xff0c;其生态系统在 AI 应用开发中扮演着重要角色。本文将探讨如何利用 Java 技术栈构建生产级 AI 应用&#x…...

编程新知 2026/3/27 2:02:40

[特殊字符] 怕你停电的姐姐：UPS 还分 “直流” 和 “交流”？ 今天一篇给你盘个透！

哈喽&#xff0c;我的老铁们&#xff01;我是你们那个 “怕你停电” 的姐姐&#xff0c;也是专门卖 UPS 电源的姐姐&#xff01;平时总有朋友问我&#xff1a;“姐姐&#xff0c;我看 UPS 有好多种&#xff0c;什么直流交流的&#xff0c;到底有啥区别&#xff1f;我该咋选&…...

编程新知 2026/3/27 1:44:29

【操作系统】第三章 内存管理（一）

第三章 内存管理 3.1 内存管理概念 3.1.1 内存管理的基本原理和要求 内存管理的主要功能&#xff1a; 内存空间的分配与回收。[连续分配管理方式](#3.1.2 连续分配管理方式)和非连续分配管理方式&#xff08;分页、分段&#xff09;地址转换&#xff1a;实现逻辑地址到物理…...

编程新知 2026/3/27 1:22:19

java打卡学习3：ArrayList扩容机制

ArrayList扩容机制概述ArrayList是基于动态数组实现的集合类&#xff0c;当元素数量超过当前数组容量时&#xff0c;会自动触发扩容机制。其核心目的是平衡内存占用与性能开销。默认初始容量未指定初始容量时&#xff0c;默认创建一个空数组&#xff08;JDK 1.8&#xff09;&am…...

编程新知 2026/3/27 1:20:11

避坑指南：JRTPLIB交叉编译时容易忽略的3个CMAKE参数（附实测解决方案）

避坑指南&#xff1a;JRTPLIB交叉编译时容易忽略的3个CMAKE参数&#xff08;附实测解决方案&#xff09; 在嵌入式开发领域&#xff0c;跨平台编译开源库是每个工程师的必修课。JRTPLIB作为实时传输协议(RTP)的经典实现&#xff0c;其ARM架构下的编译问题却常让开发者陷入"…...

编程新知 2026/3/27 0:29:30

如何使用Compiler Explorer实时编译原理：揭秘代码到汇编的转换过程

如何使用Compiler Explorer实时编译原理&#xff1a;揭秘代码到汇编的转换过程 【免费下载链接】compiler-explorer Run compilers interactively from your web browser and interact with the assembly 项目地址: https://gitcode.com/gh_mirrors/co/compiler-explorer …...

编程新知 2026/3/26 23:10:51

MCP开发环境搭建全攻略（VS Code插件安装避坑白皮书·2024官方认证版）

第一章&#xff1a;MCP开发环境搭建全攻略&#xff08;VS Code插件安装避坑白皮书2024官方认证版&#xff09;前置依赖检查与系统准备 在安装任何 MCP 相关插件前&#xff0c;请确保已安装以下基础组件&#xff1a;VS Code 1.85&#xff08;推荐 1.87.2&#xff09;、Node.js 1…...

编程新知 2026/3/26 21:03:50