每日一题:电影院排座位
电影院排座位介绍随着人们生活水平的日益提升,电影院成为了越来越多的人休闲娱乐,周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近日,又有一个电影院正在做着开张前期的准备,小蓝作为设计工程师,需要对电影院的座位进行布局设计。
本题需要在已提供的基础项目中,使用 CSS 达到对电影院排座位的目的。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
123├── css│ └── style.css└── index.html
其中:
index.html 是主页面。
css/style.css 是需要补充样式的文件。
注意:打开环境后发现缺少项目代码,请手动键入下述命令进行下载:
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/18213/02.zip && unzip 02.zip && rm 02.zip
在浏览器中预览 index.html,显示如下所示:
目标请在 css/style.css 文件中的 TODO 下补全样式代码,最终 ...
每日一题:表单生成器(职业组)
表单生成器(职业组)介绍小蓝现在遇到一个需求,要求是设计在线动态表单生成器,通过请求到的 JSON 数据即快速生成网页表单,这可把他难倒了。请你按照题目中给出的 Vue 组件与 JSON 数据格式,帮助小蓝完成文本输入框和单选框表单组件的代码编写。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
12345678910111213141516171819├── components│ ├── input.js│ ├── radio.js│ └── rate.js├── css│ ├── icon│ │ ├── star.svg│ │ └── star_full.svg│ ├── index.css│ ├── radio.css│ ├── rate.css│ └── reset.css├── data.json├── effect-1.gif├── effect-2.gif├── index.html└── lib ├── axios.min.js └── vue.min.js
其中:
index.html 是 ...
每日一题:表单生成器(大学组)
表单生成器(大学组)介绍小蓝现在遇到一个需求,要求是设计在线动态表单生成器,通过请求到的 JSON 数据即快速生成网页表单,这可把他难倒了。请你按照题目中给出的 Vue 组件与 JSON 数据格式,帮助小蓝完成多选框、下拉框的代码编写。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
123456789101112131415161718├── components│ ├── checkbox.js│ ├── rate.js│ └── select.js├── css│ ├── icon│ │ ├── star.svg│ │ └── star_full.svg│ ├── index.css│ ├── rate.css│ └── reset.css├── data.json├── effect-1.gif├── effect-2.gif├── index.html└── lib ├── axios.min.js └── vue.min.js
其中:
index.html 是主页面。
components 是项目组件 ...
每日一题:宝贵的一票
宝贵的一票介绍公司经常举办各种活动,但一到投票环节就犯了难,于是公司决定安排小蓝开发一个投票系统,更好的收集大家的投票信息。为了赶在下一次活动开始前上线,小蓝正在马不停蹄的赶工中,请你也来帮助小蓝完成部分功能吧。
准备本题已经内置了初始代码,打开实验环境,目录结构如下:
12345├── css├── images├── js│ └── jquery.min.js└── index.html
其中:
index.html 是主页面。
images 是存放图片的文件夹。
css 是存放样式文件的文件夹。
js/jquery.min.js 是 jQuery 文件。
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
接着,打开环境右侧的【Web 服务】,就可以在浏览器中看到如下效果:
目标完成 index.html 文件中的 TODO 部分。
点击添加选项,页面中新增一个选项。选项前文字按照:选项 1,选项 2,选项 3 …… 顺序排列,当页面中的选项大于 2 个时,选项后面跟随删除按钮(即 x 图标 ...
每日一题:版本比较器
版本比较器介绍“MyApp” 应用上线后获得了用户一致好评,为了给用户带来更加新颖的功能,研发团队定期会进行 App 的版本更新,即当用户打开 App 时,检查当前 App 的版本号与服务器上的最新版本号进行比较以此来引导用户完成更新操作。
本题需要在已提供的基础项目中使用 JS 知识封装一个比较两个版本号大小的通用工具函数。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
123├── js│ └── index.js└── index.html
其中:
index.html 是主页面。
js/index.js 是需要补充代码的 js 文件。
目标请在 js/index.js 文件中补全函数 compareVersion 中的代码,该函数接收两个版本号字符串,分别代表当前 App 版本(version1)和服务器最新版本(version2)。函数需要比较这两个版本号的大小,并返回以下结果:
如果 version1 < version2,返回 -1(数据类型:Number)。
如果 version1 = version2,返回 0(数据类型:Number ...
每日一题:给页面化个妆
【页面布局】给页面化个妆背景介绍各个网站都拥有登录页面,设计一个界面美观的登录页面,会给用户带来视觉上的享受。本次试题我们要完成一个登录页面的布局。
准备步骤在开始答题前,你需要在线上环境终端中键入以下命令,下载并解压所提供的文件。
1wget https://labfile.oss.aliyuncs.com/courses/7835/exam01-imi.zip && unzip exam01-imi.zip && mv exam01-imi/* ./ && rm -rf exam01-imi*
下载完成之后的目录结构如下:
1234567├── css│ └── style.css├── images│ ├── background-pic.jpeg│ ├── cat.png│ └── icon.png└── index.html
其中:
css/style.css 是本次挑战需补充的样式文件。
images 是项目所用到的图片文件。
index.html 是登录页面。
下载源码。
选中 index.html 右 ...
每日一题:个人博客
【页面布局】个人博客背景介绍很多人都有自己的博客,在博客上面用自己的方式去书写文章,用来记录生活,分享技术等。下面是蓝桥云课的博客,但是上面还缺少一些样式,需要大家去完善。
准备步骤在开始答题前,你需要在线上环境终端中键入以下命令,下载并解压所提供的文件。
1wget https://labfile.oss.aliyuncs.com/courses/7835/blog.zip&& unzip blog.zip && rm blog.zip
下载完成之后的目录结构如下:
123├── index.css└── index.html└── logo.svg
其中:
index.css 是本次挑战需要补充样式的文件。
index.html 是博客页面。
logo.svg 是 logo 图片.
你可以参考下图中的步骤访问项目:
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
打开环境右侧的【Web 服务】,就可以在浏览器中看到未完成的博客页面。
考试要求
在 index ...
每日一题:水果摆盘
【页面布局】 水果摆盘背景介绍目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式,这次试题将利用 Flex 实现经典布局效果。
准备步骤在开始答题前,你需要在线上环境终端中键入以下命令,下载并解压所提供的文件。
1wget https://labfile.oss.aliyuncs.com/courses/7835/fruit-flex.zip&& unzip fruit-flex.zip && rm fruit-flex.zip
下载完成之后的目录结构如下:
123├── index.css└── index.html└── img
其中:
index.css 是本次挑战的需要补充样式文件。
index.html 为主页面。
img 图片文件夹。
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
打开环境右侧的【Web 服务】。
考试要求提示1234align-self 值 : flex-start flex-end center bas ...
每日一题:小兔子爬楼梯
【算法题】小兔子爬楼梯介绍小兔子想去月球上旅行,假设小兔子拥有一个 n 阶梯子,当你爬完 n 层就可以到达月球,小兔子每次可以跳 1 或者 2 个台阶,小兔子有多少种跳法可以到达月球呢?
给定 n 是一个正整数,代表梯子的阶数,当 n=2 时,小兔子有 2 种跳法到达月球;当 n=3 时,小兔子有 3 种跳法跳到月球,以此类推,解释如下图所示:
实现思路提示这里为同学提供以下两种解题思路。
1. 递归
可以使用递归来实现,具体思路如下:
当阶梯数为 0 时,只有 0 种方法;当阶梯数为 1 时,只有 1 种方法;当阶梯数为 2 时,只有 2 种方法,所以当阶梯数 n 小于等于 2 时,可以直接返回值。
如果阶梯数大于 2,就递归。
2. 动态规划
可以使用动态规划来实现,具体思路如下:
当阶梯数 n 为 0 时,直接返回 0。
当阶梯数 n 为 1 时,直接返回 1。
当阶梯数大于 1 时,假设有 i 阶梯子需要爬,就有 dp[i] 中方法。
3 阶以上的梯子,都满足一个规律:dp[i] = dp[i-1] + dp[i-2]。
解题思路不只这两种,同学们可以自由发挥。
准备 ...
每日一题:折叠手风琴
【功能实现】折叠手风琴介绍本次挑战需要实现图片折叠的效果,请使用 jQuery 语法完成代码。
准备本题已经内置了初始代码,打开实验环境,目录结构如下:
123456789101112├── css│ └── style.css├── images│ ├── pic1.jpeg│ ├── pic2.jpeg│ ├── pic3.jpeg│ ├── pic4.jpeg│ └── pic5.jpeg├── js│ ├── index.js│ └── jquery-3.6.0.min.js└── index.html
其中:
css/style.css 是页面样式文件。
images 是项目所用到的图片文件夹。
js 是放置 js 代码的文件夹。
index.html 是页面布局。
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。打开环境右侧的【Web 服务】,就可以在浏览器中看到当前页面,点击图片,被折叠的图片不会展开。
目标请完善 index.js 文件,让页面具有如下所 ...
