2024年广西职业院校技能大赛中职组《微网站设计与开发》赛项竞赛样题

2024年广西职业院校技能大赛

中职组《微网站设计与开发》赛项

竞赛样题

（一）操作说明

1.赛前准备时间，请先检查所需使用的计算机软硬件是否正

常；

2.运行比赛机位桌面“微网站设计与开发比赛任务.rar”自

解压文件，所有比赛素材将会解压到桌面“微网站设计与开发比

赛任务”文件夹中，每任务所需的素材和样张分别存放“任务一”、

“任务二”子文件夹内；

3.请比赛选手在桌面上自行建立新文件夹，名称为“×××参

赛作品”。其中×××为三位赛位号，比如赛位号为001号，文件

夹名称为“001参赛作品”；赛位号为017号，文件夹名称为“017

参赛作品”并在请此文件夹中分别建立名称为“任务”、“任务

四”子文件夹；

4.在桌面文件夹“×××参赛作品”内“任务”文件夹下应建

立页面名称子文件夹，子文件夹下建立“效果图”、“切片”、“文

字”子文件夹，存放相应的文件。如图1-1微网站结构和素材

整理参考示例；

【第1页共15页】

图1-1微网站结构和素材整理参考示例

5.作品提交。最终比赛提交微网站成果需以APK格式保存

在桌面文件夹“×××参赛作品”下“任务四”子文件夹中；

注意：

解压密码由裁判现场公布；

若在参赛选手桌面“×××参赛作品”文件夹内无指定任务文

件夹及相关文件，会被减去相应分数；

微网站制作过程中请使用谷歌浏览器，并注意随时保存，浏

览微网站使用谷歌浏览器；谷歌浏览器移动端网站预览方法如下

图所示：

第一步：打开谷歌浏览器，按F12，点击“移动设备模

式”；

【第2页共15页】

第二步：在平台里点击编辑器右上角预览按钮，复制链接；

第三步：将复制的链接粘贴在谷歌浏览器地址栏。

【第3页共15页】

注：如果显示不完整，请先点击Responsive选择任意一

款手机，刷新界面确定页面完整后输入405*640

赛题所涉及的手册放在桌面“资料”文件夹中，pdf

文件建议用浏览器方式打开查看；

（二）比赛任务及要求

制作要求：

1.在微网站设计与开发平台中创建站点“易通房产”，按

照制作要求创建微网站页面；

2.按照微网站结构和素材整理参考示例（见图1-1），对

素材进行加工并重新分类整理归纳。

任务一：健康医疗微网站页面制作

【第4页共15页】

1.分类归档

按照微网站结构和素材整理参考示例（见图1-1），对素

材进行重新分类整理归纳。

2.制作切片

○1按制作的UI效果图进行合理切片，符合移动端页面的

设计要求，不允许使用整幅图片；

○2将制作微网站所需的切片，存放于“桌面：\XXX参赛

作品\任务”相应页面“切片”文件夹内。

3.微网站页面制作要求

○1易通首页

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“易通首页”；

设置页面中的九项导航菜单，为依次（延迟间隔0.1

秒）从左到右移入的动画效果；

设置页面中“世茂湖滨花园”、“周边附近”、“交通

便利”三项，为依次（延迟间隔0.1秒）从右到左移入的动

画效果；

页面中“8000家”、“10万”、“12年”使用“文字”

组件制作，字体设置为“微软雅黑”，字号设置为“20px”，

【第5页共15页】

字体颜色为“白色”；

页面中“全国门店”、“全国经纪人”、“倾清服务”

使用“文字”组件制作，字体设置为“微软雅黑”，字号设

置为“14px”，字体颜色为“白色”；

页面中“中海昊宇天下”、“和光悦府”二项，为依

次（延迟间隔0.1秒）中心放大的动画效果；

在页面右下角添加“”图片，编写代码实现点

击“”返回页面顶部；

通过修改THML代码，实现五项底部菜单。

○2租房

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“租房”；

页面顶端添加4张轮播图

设置页面中的“整租”、“合租”、“资讯”、“新房源”

四项导航菜单，为依次（延迟间隔0.1秒）从左到右移入的

动画效果；

设置页面中的“精品房源”、“热门房源”、“公寓建

筑”、“降价专区”四项导航菜单为依次（延迟间隔0.1秒）

从右到左移入的动画效果；

【第6页共15页】

设置页面“特惠房源”下的四项内容，为依次（延

迟间隔0.1秒）淡入的动画效果；

通过修改THML代码，实现五项底部菜单。

○3二手房

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“二手房”；

设置页面中的五项导航菜单，为依次（延迟间隔0.1

秒）从左到右移入的动画效果；

设置页面“东城三居室”、“低税费两房”、“5年内

一居”、“二手房月报”四项内容，为依次（延迟间隔0.1秒）

光速进入的动画效果；

设置页面“全部房源”下的二项内容，为依次（延

迟间隔0.1秒）从左到右弹入的动画效果；

使用“QQ客服”组件，设置QQ号码为4008471008，

并按照效果图调整图标，将“position”调整为固定；

使用“一键拨号”组件，设置电话号码为

4008471008，并按照效果图调整图标，将“position”调整

为固定；

通过修改THML代码，实现五项底部菜单。

○4购房资格

【第7页共15页】

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“购房资格”；

设置页面中的八项导航菜单，为依次（延迟间隔0.1

秒）第一行从左到右，第二行从右到左移入的动画效果；

设置页面“购房流程”下的四项内容，为依次（延

迟间隔0.1秒）淡入的动画效果；

设置页面“装修流程”下的四项内容，为依次（延

迟间隔0.1秒）从左到右移入的动画效果；

设置页面“购房资格”下的四项内容，为依次（延

迟间隔0.1秒）从右到左移入的动画效果；

在页面右下角添加“”图片，编写代码实现点击

“”返回页面顶部；

通过修改THML代码，实现五项底部菜单。

○5装修

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“装修”；

设置页面中的四项导航菜单，为依次（延迟间隔0.1

秒）从左到右移入的动画效果；

设置页面“居家经验”、“效果图”、“学装修”三项

【第8页共15页】

内容，为依次（延迟间隔0.1秒）从右到左的移入的动画效

果；

设置页面“真实案例”、“装修攻略”、“热门专题”

三项内容，为依次（延迟间隔0.1秒）从左到右弹入的动画

效果；

设置页面“VR看装修”下的四项内容，为依次（延

迟间隔0.1秒）从右到左移入的动画效果；

修改关键性代码实现“返回顶部默认隐藏”效果，

制作和添加“”图片，默认隐藏状态，当页面向下滑动

显示，点击“”返回页面顶部。

通过修改THML代码，实现五项底部菜单。

○6装修攻略

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“装修攻略”；

设置页面“装修前”下的三项导航，为依次（延迟

间隔0.1秒）从上到下弹入的动画效果；

设置页面“装修中”下的三项导航，为依次（延迟

间隔0.1秒）淡入的动画效果；

设置页面“装修后”下的三项导航，为依次（延迟

间隔0.1秒）从左到右移入的动画效果；

【第9页共15页】

添加部分代码实现“提示广告特效”，为页面添加广

告，广告可单击“跳过”或5秒后自动关闭，将

“position”调整为固定。

○7商城

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“商城”；

页面顶端添加4张轮播图

设置页面中的五项导航菜单，为依次（延迟间隔0.1

秒）从左到右弹入的动画效果；

设置页面中“10元”、“20元”、“50元”满减卷，

为依次（延迟间隔0.1秒）从右到左弹入的动画效果；

设置页面“热门产品”下的五项导航，为依次（延

迟间隔0.1秒）淡入的动画效果；

设置页面中“猜你喜欢”添加4张轮播图；

在页面右下角添加“”图片，编写代码实现点击

“”返回页面顶部；

通过修改THML代码，实现五项底部菜单。

○8折扣产品

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

【第10页共15页】

新建页面命名为“折扣产品”；

设置页面中的八项导航菜单，为依次（延迟间隔0.1

秒）从右到左弹入的动画效果；

设置页面“掌柜推荐”下的四项内容，为依次（延

迟间隔0.1秒）从左到右弹入的动画效果；

设置页面“创意专区”下的二项内容，为依次（延

迟间隔0.1秒）淡入的动画效果；

设置页面中的“七天退货”、“正品保证”、“售后保

障”三项内容，为依次（延迟间隔0.1秒）从下到上弹入的

动画效果；

修改关键性代码实现“返回顶部默认隐藏”效果，

制作和添加“”图片，默认隐藏状态，当页面向下滑动

显示，点击“”返回页面顶部；

通过修改THML代码，实现五项底部菜单。

○9发现

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“发现”；

设置页面中的五条资讯，为依次（延迟间隔0.1秒）

从左到右进入的动画效果；

根据需求编写代码实现“弹出菜单”效果，实现点

【第11页共15页】

击“易通保”弹出菜单，效需要与效果图一致。

○10个人中心

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“个人中心”；

设置页面中的“账户余额”、“预付金”、“优惠券”、

“金币”四项导航菜单，为依次（延迟间隔0.1秒）从左到

右移入的动画效果；

设置页面“常用功能”下的八项内容，为依次（延

迟间隔0.1秒）从右到左弹入的动画效果；

通过修改THML代码，实现五项底部菜单。

○11装修设计

在微网站设计与开发平台中按照提供的UI效果图进行合理

切片，完成页面制作，保证页面效果完全一致。

新建页面命名为“装修设计”；

设置页面中的“家装”、“景观”、“家具”、“理论”

四项导航菜单，依次（延迟间隔0.1秒）从左到右移入的动

画效果；

设置页面中的四条资讯，依次（延迟间隔0.1秒）

从右到左弹入的动画效果；

通过修改THML代码，实现五项底部菜单。

【第12页共15页】

任务三：微网站页面交互

○1易通首页

【租房】菜单链接到“租房”页面；

【二手房】菜单链接到“二手房”页面；

【装修】菜单链接到“装修”页面；

【商城】菜单链接到“商城”页面；

底部菜单【首页】按钮链接到“易通首页”页面；

底部菜单【发现】按钮链接到“发现”页面；

底部菜单【我的】按钮链接到“个人中心”页面。

○2租房

底部菜单【首页】按钮链接到“易通首页”页面；

底部菜单【发现】按钮链接到“发现”页面；

底部菜单【我的】按钮链接到“个人中心”页面。

○3二手房

【购房资格】菜单链接到“购房资格”页面；

底部菜单【首页】按钮链接到“易通首页”页面；

底部菜单【发现】按钮链接到“发现”页面；

底部菜单【我的】按钮链接到“个人中心”页面。

○4购房资格

底部菜单【首页】按钮链接到“易通首页”页面；

底部菜单【发现】按钮链接到“发现”页面；

【第13页共15页】

底部菜单【我的】按钮链接到“个人中心”页面。

○5装修

页面中的“”链接到“装修攻略”页面；

底部菜单【首页】按钮链接到“易通首页”页面；

底部菜单【发现】按钮链接到“发现”页面；

底部菜单【我的】按钮链接到“个人中心”页面。

○6装修攻略

左上角“<”图片链接到“装修”页面；

○7商城

【折扣产品】菜