每日一题:乾坤大挪移心法
乾坤大挪移心法介绍六大派围攻光明顶,为解除明教危机,张无忌临危受命,在小昭的帮助下进入明教圣地拿到乾坤大挪移心法。在这关键时刻,心法因没有妥善保存长久暴露在空气中,部分字体已不可见,下面需要由你来设计心法帮助张无忌习得神功,战胜六大门派。
准备题目已经内置了代码,打开实验环境,选中 main.js 文件
目标找到 main.js 文件中的“乾坤大挪移心法” mentalMethod 函数,完成函数中的 TODO 部分。
mentalMethod 需要返回一个函数,可以一直进行调用,但是最后一次调用不传参。
函数通过以下方式执行,返回结果均为 '战胜峨眉,武当,少林'。
123mentalMethod('峨眉')('武当')('少林')();mentalMethod('峨眉','武当')('少林')();mentalMethod('峨眉','武当','少林')();
注意逗号为英文逗号。
...
每日一题:权限管理
每日一题:权限管理介绍你有没有想过,在我们日常浏览的网页中,那些新闻或者商品内容是如何被输入到数据库中的呢?大家虽然没有用过,但是肯定听过“后台管理系统”,运营人员就是通过它将批量的商品上传到数据库并呈现在网页中的。那么随便一个人就可以通过该管理系统操作这些商品数据吗?当然不行,这就涉及到了权限管理问题。
本题需要在已提供的基础项目中使用 JS/jQuery 知识完善代码,最终实现权限管理的功能。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
1234567├── effect.gif├── index.html├── css└── js ├── index.js ├── jquery-3.6.0.min.js └── userList.json
其中:
effect.gif 是最终实现的效果图。
index.html 是主页面。
css 是样式文件夹。
js/index.js 是需要补充代码的 js 文件。
js/jquery-3.6.0.min.js 是 jQuery 文件。
js/userList.json 是需要请求的数据文件。
注意:打 ...
每日一题:组课神器
组课神器介绍在很多教育网站的平台上,课程的章节目录会使用树型组件呈现,为了方便调整菜单,前端工程师会为其赋予拖拽功能。本题需要在已提供的基础项目中,完成可拖拽树型组件的功能。
准备12345678├── effect.gif├── css│ └── index.css├── index.html└── js ├── data.json ├── axios.min.js └── index.js
其中:
index.html 是主页面。
js/index.js 是待完善的 js 文件。
js/data.json 是存放数据的 json 文件。
js/axios.min.js 是 axios 文件。
css/index.css 是 css 样式文件。
effect.gif 是完成的效果图。
注意:打开环境后发现缺少项目代码,请复制下述命令至命令行进行下载。
123cd /home/projectwget -q https://labfile.oss.aliyuncs.com/courses/18213/test8.zipunzip test8.zip && ...
每日一题:自适应页面
自适应页面介绍响应式布局是在 2010 年 5 月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的。简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。通过响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着大屏幕移动设备的普及,用“大势所趋”来形容也不为过。因此越来越多的设计师采用这个技术。
本题需要在已提供的基础项目中,使用 CSS 或者 DOM 操作达到 Menu 和内容页自适应的效果。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
1234567891011├── css│ └── style.css├── images│ ├── C++_course.png│ ├── linux_course.png│ └── python_course.png├── index.html├─── js│ └── jQuery.min.js├── default.gif├── effect.gif
其中:
index.html 是主页面。
css/style.css 是需要补充样式的文件。
js/ ...
每日一题:植物灌溉
植物灌溉介绍朋友花园内的植物严重缺水,急需你的帮助,让我们用目前 CSS3 中新增的 Grid 布局去完成灌溉任务吧。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
123└── css├── images└── index.html
其中:
images 是图片文件夹。
css/style.css 是需要补充样式的文件。
index.html 是主页面。
注意:打开环境后发现缺少项目代码,请手动键入下述命令进行下载:
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/18421/water-grid.zip && unzip water-grid.zip && rm water-grid.zip
在浏览器中预览 index.html 页面效果如下:
目标请使用 Grid 布局中的 grid-area 属性完善 css/style.css 中的 TODO 代码,帮助你的朋友顺利完成植物灌溉,最终实现下图效果。
提示:
12grid-area:grid- ...
每日一题:芝麻开门
芝麻开门介绍在阿里巴巴和四十大盗的故事中,阿里巴巴因为无意中知道了开门的咒语人生发生了翻天覆地的变化,四十大盗也因为咒语的泄露最终丧命。芝麻开门的咒语作为重要的信息推动着故事的发展。下面由你来为门设置这道机关,输入芝麻开门后才能放行。
准备本题已经内置了初始代码,打开实验环境,目录结构如下:
123├── index.css├── index.html└── index.js
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
接着,打开环境右侧的【Web 服务】,就可以在浏览器中看到如下效果:
点击页面上的“点击弹出对话框,输入咒语”按钮,无任何反应。
目标找到 index.js 文件中的 mPrompt 函数,完成函数中的 TODO 部分。
点击“点击弹出对话框,输入咒语”按钮会调用 mPrompt 函数,mPrompt 调用后页面显示对话框。mPrompt 函数必须返回一个 promise 对象。
在对话框中的输入框中输入文字后,点击确认按钮,对话框消失, promise 返回成功,promise ...
每日一题:找到未引用的图片
找到未引用的图片介绍小蓝在公司负责图文编辑器的开发,每次在编辑器中插入图片都会调用一次上传接口,将图片上传至服务器中,但是文章最终编辑完成时可能并未引用所有上传的图片,这就导致许多“无效文件”的产生,于是小蓝想编写一个维护脚本,定期清理那些未被引用的图片文件。
下面就请你使用 Node.js 帮助小蓝找出那些未引用的图片。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
1234├── articles├── images├── index.js└── test.js
其中:
articles 是项目的文章目录。
images 是项目的图片目录。
test.js 是验证答案是否正确的工具方法。
index.js 是需要补充代码的 js 文件。
注意:打开环境后发现缺少项目代码,请复制下述命令至命令行进行下载。
1234wget https://labfile.oss.aliyuncs.com/courses/16666/dist_04.zipunzip dist_04.zipmv dist/* ./rm -rf dist*
目标找到 index.js 中的 find ...
每日一题:展开你的扇子
展开你的扇子介绍网站上为了让内容显示不臃肿,我们可以做一个折叠展开的效果。本题将使用 CSS3 实现元素呈扇形展开的效果。
准备开始答题前,需要先打开本题的项目代码文件夹,目录结构如下:
1234├── css│ └── style.css├── effect.gif└── index.html
其中:
css/style.css 是样式文件。
effect.gif 是最终实现的效果图。
index.html 是主页面。
注意:打开环境后发现缺少项目代码,请手动键入下述命令进行下载:
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/02.zip && unzip 02.zip && rm 02.zip
在浏览器中预览 index.html 页面,鼠标悬浮在元素上,元素不会展开,效果如下:
目标请完善 css/style.css 文件(请勿修改文件夹中已给出的代码,以免造成判题无法通过)。
当鼠标悬浮在元素上,元素呈扇形展开,页面效果如下所示:
完成后的效 ...
每日一题:用户名片
用户名片介绍CSS 样式是前端开发的必备技能之一,下面请用你丰富的经验帮小蓝完成一个漂亮的用户名片制作吧。
准备本题已经内置了初始代码,打开实验环境,目录结构如下:
1234├── css│ └── style.css├── images└── index.html
其中:
css/style.css 是样式文件。
images 是页面布局需要用到的图片素材。
index.html 是主页面。
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。
接着,打开环境右侧的【Web 服务】,就可以在浏览器中看到如下效果:
目标请通过补充或者修改 css/style.css 中的样式(注意:不要修改元素大小),达到以下效果:
实现卡片(class = card) 和用户头像(class = avatar) 元素水平垂直居中。
左侧文字(class = level 和 class = points)水平居中。
完成后,最终页面效果如下:
规定
请勿修改已经提供的代码,以免造成判题无法通过。
请严格按照考试 ...
每日一题:修复网站显示问题
修复网站显示问题背景介绍目前,HTML5 与 CSS3 已经成为前端开发工程师的必备技能。接下来,我们将使用 HTML5 + CSS3 实现了一个宣传页面。
准备步骤在开始答题前,你需要在线上环境终端中键入以下命令,下载并解压宣传页面的源代码。
1wget https://labfile.oss.aliyuncs.com/courses/4152/exam01.zip && unzip exam01.zip && rm exam01.zip
你可以参考下图中的 3 个步骤下载源码。同时,选中 index.html 右键启动 Web Server 服务,让项目运行起来。
打开环境右侧的【Web 服务】,点击【exam01】文件夹,效果如下(页面显示宽度为 1920 px):
考试需求如上所示的 index.html 布局不符合最终要求。请检查 exam01 下的各个文件,找到并修复项目存在的 Bug,使宣传页面正常显示,效果如下(页面显示宽度为 1920 px):
要求规定
请勿修改考试默认提供项目中的文件名称。
总通过次数: 3010 | 总提交 ...
