每日一题：新鲜的蔬菜
新鲜的蔬菜介绍厨房里新到一批蔬菜，被凌乱地堆放在一起，现在我们给蔬菜分下类，把相同的蔬菜放到同一个菜板上，拿给厨师烹饪美味佳肴吧。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1234├── css│ └── style.css├── images└── index.html
其中：
css/style.css 是需要补充代码的样式文件。
images 是图片文件夹。
index.html 是主页面。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9788/02.zip && unzip 02.zip && rm 02.zip
在浏览器打开后，效果如下：
目标完成 css/style.css 中的 TODO 部分。所有元素的大小都已给出，无需修改，完成后效果如下（图中灰色线条为布局参考线无需实现）：
规定
请勿修改页面中所有给出元素的大小，以免造成无法判题通过。
请严格按照考试步 ...
每日一题：西游记之西天取经
西游记之西天取经介绍师徒四人一行向西天拜佛求经，不料中途被妖怪施了法术动弹不得！俗话说救人一命胜造七级浮屠！情急之下小蓝挺身而出，灵机一动，用 css 行善施救，让师徒西行而去，从而普渡众生，善哉，善哉！
准备本题已经内置了初始代码，打开实验环境，目录结构如下：
1234567├── images │ ├── background.webp│ ├── west_01.png│ ├── west_02.png│ ├── west_03.png │ └── west_04.png└── index.html
其中：
index.html 是主页面。
images 是图片文件夹。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
1wget https://labfile.oss.aliyuncs.com/courses/18164/The_journey_to_the_West.zip && unzip The_journey_to_the_West.zip && rm The_journey_to_the_West ...
每日一题：文本查重小能手
文本查重小能手介绍我们经常会用到论文查重，论文查重对于保障学术诚信、提高学术水平、维护学术声誉和增强学术合作都具有重要的意义。
本题目要求实现一个基于前端界面的文本查重工具，用户可以在页面上输入两段文本，系统会自动计算并显示它们的重复率。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
123456789.├── css│ └── style.css├── data.json├── effect.gif├── index.html└── js ├── checkPlagiarism.js └── index.js
其中:
index.html 是主页面。
css 是存放项目样式的文件夹。
data.json 是请求需要用到 JSON 数据。
js 是存放项目 js 的文件夹。
effect.gif 是项目最终完成效果图。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/18421/plagiarism.zip ...
每日一题：网页PPT
网页 PPT介绍除了使用办公软件来制作 PPT，利用前端技术其实我们也可以制作一个在浏览器播放的 PPT，这样的 PPT 更加方便传播和查看，而且可以最大限度地利用前端技术的布局和交互能力。
本题请实现一个讲授 HTML 基础知识的网页 PPT。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678910├── css│ └── style.css├── effect.gif├── images│ ├── left-small.svg│ └── right-small.svg├── index.html└── js ├── index.js └── jquery-3.6.0.min.js
其中：
css/style.css 是样式文件。
index.html 是主页面。
images 文件夹内包含了页面使用的 icon。
js/index.js 是页面 js 文件。
js/jquery-3.6.0.min.js 是 jquery 文件。
effect.gif 是页面最终的效果图。
注意：打开环境后发现缺少项目代码，请复制下述命令至 ...
每日一题：图片验证码
图片验证码介绍在我们访问一些网站的时候，常常会遇到让我们选择图片来验证是否是人类的验证码，利用这种方式网站可以过滤掉来自机器的恶意访问。
本题请实现一个带图片验证码功能的登录页面。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678910├── css│ └── style.css├── effect.gif├── images├── index.html├── initial.gif└── js ├── axios.js ├── data.json └── vue.js
其中：
css/style.css 是样式文件。
index.html 是主页面。
images 文件夹内包含了页面使用的图片文件。
js/vue.js 是 vue 文件。
js/axios.js 是 axios 文件。
js/data.json 是图片数据文件。
effect.gif 是页面最终的效果图。
initial.gif 是页面的初始效果图。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载：
123cd /home/projectwg ...
每日一题：图片水印生成
图片水印生成介绍很多网站都会通过给图片添加水印的形式来标记图片来源，维护版权。前端生成水印通常是通过 canvas 实现，但实际上我们也可以直接利用 CSS 来实现图片水印，这样做会有更好的浏览器兼容性。
本题中你将封装一个创建文字水印的函数。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678├── css│ └── style.css├── images│ └── origin.png├── index.html└── js ├── dom-to-image.js └── index.js
其中：
index.html 是主页面。
css/style.css 是样式文件。
js/index.js 是需要补充代码的 js 文件。
js/dom-to-image.js 是生成图片的第三方库，此文件无需修改。
images/origin.png 是项目中的原始图片文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs ...
每日一题：讨论区
讨论区介绍讨论区提供了一个与其他学习者交流和讨论的场所，以便共同探讨和理解各种知识和主题。在讨论区中，学习者可以创建和加入不同的讨论组，参与到热门话题的讨论中，也可以发起新的话题和问题。学习者可以分享自己的知识、经验和观点，也可以向其他学习者请教问题和寻求帮助。现邀请你来建设讨论区页面，快来发光发热吧。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678├── css│ └── style.css├── data.txt├── images├── mark│ ├── preview│ └── index.html└── index.html
其中：
css/style.css 是样式文件。
data.txt 是页面用到的文本。
images 是页面布局需要用到的图片素材。
mark/preview 是页面效果图。
mark/index.html 是布局参数标记页面。
index.html 是主页面。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
1wget https://labfile.oss.aliyuncs.co ...
每日一题：水果拼盘
水果拼盘介绍目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方案，本题可以使用 Flex 属性快速完成布局。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
12345678910├── css│ └── style.css├── images│ ├── apple.svg│ ├── banana.svg│ ├── blueplate.svg│ ├── redplate.svg│ ├── yellowplate.svg│ └── pear.svg└── index.html
其中：
css/style.css 是需要补充的样式文件。
index.html 是主页面。
images 是图片文件夹。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/01.zip && unzip 01.zip && rm 01.zip
在浏览器中预览 in ...
每日一题：收集帛书碎片
收集帛书碎片介绍三叔在外出考古途中无意发现了一份战国帛书，帛书边缘有被明显裁剪过的痕迹，单从帛书片段，提到记录了神秘文物的地点，无奈帛书不完整，为了早日将文物带回博物馆，三叔号召当地村民闷油瓶、王胖子、潘子共同寻找剩余帛书碎片，相约一炷香后再聚。
本题需要在已提供的基础项目中使用 JS 知识封装一个函数，达到收集帛书碎片的要求。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
123456├── js│ └── collect-puzzle.js├── css│ └── style.css├── images└── index.html
其中：
index.html 是主页面。
css/style.css 是样式文件。
images 是图片文件夹。
js/collect-puzzle.js 是需要补充代码的 js 文件。
注意：打开环境后发现缺少项目代码，请手动键入下述命令进行下载：
12cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/18213/01.zip && ...
每日一题：商品销量和销售额实时展示看板
商品销量和销售额实时展示看板介绍双 11、618 是近些年来兴起的购物节，每到这个时候商品的销售数量和销售额都非常巨大。如此庞大的数据通过表格的形式很难观察其增减趋势，图表能更加直观的显示数据的变化。目前，云课后台已经实时统计了 1 小时平台课程的销售数量和销售额，本题需要使用 echarts 将这些数据用图表的方式显示到前端。
准备开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：
1234567├── effect.gif├── css│ └── index.css├── index.html└── js ├── echarts.js └── index.js
其中：
index.html 是主页面。
index.js 是待完善的 js 文件。
echarts.js 是 echarts 文件。
index.css 是 css 样式文件。
effect.gif 是完成的效果图。
注意：打开环境后发现缺少项目代码，请复制下述命令至命令行进行下载。
123cd /home/projectwget -q https://labfile.oss.aliyuncs. ...