Rossy Yan的博客

日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。为了解决这个烦恼，优秀的产品研发团队发明了一种类似传送门的功能，以便用户能通过它快速定位到感兴趣的内容。这个功能也被通俗地比喻为“电梯”。本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。​准备步骤├── effect.gif├── index.html├── css├── images└── js ├── index.js └── jquery-

蓝桥为了帮助大家学习，开发了一个知识汇总网站，现在想设计一个简单美观的首页。本题请根据要求来完成一个首页布局。​准备步骤├── css│ └── style.css├── data.txt├── index.html└── mark.pngcss/style.css 是样式文件。data.txt 是页面数据文件。index.html 是主页面。mark.png 是页面参数标注图。cd /home/projectwget https://labfile.oss.aliyun

厨房里新到一批蔬菜，被凌乱地堆放在一起，现在我们给蔬菜分下类，把相同的蔬菜放到同一个菜板上，拿给厨师烹饪美味佳肴吧。​准备步骤├── css│ └── style.css├── images└── index.htmlcss/style.css 是需要补充代码的样式文件。images 是图片文件夹。index.html 是主页面。cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9788/02.zip

由爱拼社举办的拼图大赛进行到最后一关，1 号选手小蓝披荆斩棘成为全场黑马。本关卡需要选手使用 CSS Grid 布局完成拼图页面，但是由于小蓝技术水平有限，拼图的效果没有达到预期。现在邀请你作为协助嘉宾帮助小蓝优化拼图页面的效果。本题需要在已提供的基础项目中，使用 CSS 让拼图正确显示。​准备步骤├── css│ └── style.css├── images└── index.html目标效果要求规定请勿修改 css/style.css 文件外的任何内容。请严格按照考试步

"地球漫游"：一款基于 CSS 动画的小型网页应用，让您身临其境地感受地球绕着太阳公转的奇妙旅程。通过这个应用，您可以观察地球绕着太阳的运动轨迹和速度，感受到宇宙的浩瀚和神秘。​准备步骤├── css│ └── style.css└── index.htmlindex.html 是主页面。css/style.css 是需要补充代码的 css 文件。cd /home/projectfile="earth" && wget "https://labfile.oss.aliyuncs.

响应式布局是在 2010 年 5 月份提出的一个概念，这个概念是为解决移动互联网浏览而诞生的。简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。通过响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，用“大势所趋”来形容也不为过。因此越来越多的设计师采用这个技术。本题需要在已提供的基础项目中，使用 CSS 或者 DOM 操作达到 Menu 和内容页自适应的效果。​准备步骤├── css│ └── style.css├── i

随着人们生活水平的日益提升，电影院成为了越来越多的人休闲娱乐，周末放松的好去处。各个城市的电影院数量也随着市场的需求逐年攀升。近日，又有一个电影院正在做着开张前期的准备，小蓝作为设计工程师，需要对电影院的座位进行布局设计。本题需要在已提供的基础项目中，使用 CSS 达到对电影院排座位的目的。

师徒四人一行向西天拜佛求经，不料中途被妖怪施了法术动弹不得！俗话说救人一命胜造七级浮屠！情急之下小蓝挺身而出，灵机一动，用css行善施救，让师徒西行而去，从而普渡众生，善哉，善哉！​准备步骤├── images │ ├── background.webp│ ├── west_01.png│ ├── west_02.png│ ├── west_03.png │ └── west_04.png└── index.htmljs/echarts.js 是 ECharts

网站上为了让内容显示不臃肿，我们可以做一个折叠展开的效果。本题将使用 CSS3 实现元素呈扇形展开的效果。​准备步骤├── css│ └── style.css├── effect.gif└── index.htmlcss/style.css 是样式文件。effect.gif 是最终实现的效果图。index.html 是主页面。cd /home/projectwget https://labfile.oss.aliyuncs.com/courses/9791/02.zip &

CSS3 的 Flex 弹性布局和 Grid 网格布局已经成为前端页面排版的主流选择。本次挑战将使用这两种布局方式来画一只考拉。​准备步骤├── styles.css└── index.htmlstyles.css 是页面样式文件。index.html 是页面布局结构。选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。打开环境右侧的 Web 服务，就可以在浏览器中看到未完成的考拉。目标效果创造

右键启动 Web Server 服务（Open with Live Server），让项目运行起来。请使用 jQuery 或者 js ，完成。文件中的 TODO 部分。​准备步骤├── css│ └── style.css├── images├── index.html└── js └── jquery.min.jsindex.html 是主页面。js/jquery.min.js 是 jQuery 文件。images 是图片文件夹。css/style.css 是样式文件

我们的国家国土面积十分的广阔，目前中国有 34 个省级行政区，包括 23 个省、5 个自治区、4 个直辖市、2 个特别行政区。其下面还有几千个县级区域，以及更多的乡镇区域。这样层层嵌套的省市区数据在实际开发中是如何处理的呢？下面请运用所学，解开这个谜团吧～​准备步骤├── convert-to-tree.js└── index.htmlindex.html 是主页面。convert-to-tree.js 是需要补充代码的 js 文件。目标效果[ { id: "51", //

今宵酒醒何处，杨柳岸晓风残月”，“蓦然回首，那人却在灯火阑珊处”，“试问闲愁都几许？一川烟草，满城风絮，梅子黄时雨” ......宋词可谓是古代文学桂冠上一颗璀璨的明珠，本题将实现一个在搜索框中输入关键字，实时显示符合条件的完整宋词的功能。​准备步骤├── css│ └── style.css├── data.json├── index.html└── js ├── axios.min.js └── vue.min.jsindex.html 是主页面。js/vue.

最近蓝桥准备了很多 618 优惠，今天我们将化身蓝桥前端小工，亲自动手制作一个 618 活动页面，快来一显身手吧。​准备步骤├── css│ └── style.css├── images├── index.html└── mark ├── assets ├── index.html └── previewcss/style.css 是样式文件。images 是页面布局需要用到的图片素材。index.html 是主页面。mark/preview 是存放页

CSS 样式是前端开发的必备技能之一，下面请用你丰富的经验帮小蓝完成一个漂亮的用户名片制作吧。​准备步骤├── css│ └── style.css├── images└── index.htmlcss/style.css 是样式文件。images 是页面布局需要用到的图片素材。index.html 是主页面。目标效果实现卡片（class = card） 和用户头像（class = avatar） 元素水平垂直居中。左侧文字（class = level 和 clas

在使用 element-ui 开发的过程中，表单组件的使用相当频繁，其使用方式也比较简单，只要根据官网示例操作即可掌握。不过刚开始使用它的小蓝却遇到了一个问题：本来一个完整的表单已经出现在页面上了，可是调皮的小猫跳到键盘上一顿“操作”后表单凭空消失了......机智的你来帮他查找原因并修复这个 bug 吧～

CSS 布局（Cascading Style Sheets Layout）是网页设计的核心，定义元素位置、大小和排列，构建页面结构。其布局模式多样：Flexbox 通过display:flex激活，借助justify-content和align-items灵活排列元素，适用于导航栏、卡片列表；CSS Grid 用grid-template-columns和grid-template-rows定义二维网格定位元素，常用于电商、多列图文排版；传统流式布局基于文档流，元素顺序排列，自适应屏幕宽度，保障页面可读性。

在 JavaScript 中，对于时间的处理，往往需要借助于Date对象操作来完成。但是，仅仅使用它来获取时间是无法满足日常业务需求的。例如，有时候我们需要将时间从枯燥的数字转化为更能吸引用户眼球的动态时钟。我们该如何实现呢？在本节挑战中，我们就遇到了类似情况：：上图中的动态时钟效果，是通过 HTML 和 CSS 结合 JS 中的 Date 对象来实现的。本节挑战的代码中，还未实现秒针转动的效果。希望你能观察代码的特点，让秒针转起来。

随着大数据的发展，数据统计在很多应用中显得不可或缺，echarts作为一款基于JavaScript的数据可视化图表库，也成为了前端开发的必备技能，下面我们一起来用echarts开发一个学生数据统计的柱形图。echarts.js是百度开发的一款开源的、功能强大的数据可视化库，它能够以直观、美观的方式展示数据，帮助用户更好地理解和分析数据。无论是简单的统计图表，还是复杂的商业数据展示，都可以使用echarts.js来实现。

超文本标记语言（HyperText Markup Language，简称 HTML）是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同，负责搭建网页“骨架”，用标签组织内容，像标题、段落、图片等元素，通过起始与结束标签（部分可单用，如``）界定层级与布局，将信息有序整合。标签含特定语义，向浏览器传达展示方式，为网页准确呈现及后续美化、交互筑牢根基。

层叠样式表（Cascading Style Sheets，简称CSS）是一种用于描述网页视觉表现的语言。该语言与HTML协同工作，其中HTML负责构建网页的结构，而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用，这些规则由选择器（Selectors）和声明块（Declaration Blocks）构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响，而声明块则包含了具体的样式声明，这些声明定义了元素的视觉属性和相应的值。