2024年廣西職業(yè)院校技能大賽中職組《微網(wǎng)站設(shè)計(jì)與開發(fā)》賽項(xiàng)競(jìng)賽樣題

2024年廣西職業(yè)院校技能大賽

中職組《微網(wǎng)站設(shè)計(jì)與開發(fā)》賽項(xiàng)

競(jìng)賽樣題

（一）操作說明

1.賽前準(zhǔn)備時(shí)間，請(qǐng)先檢查所需使用的計(jì)算機(jī)軟硬件是否正

常；

2.運(yùn)行比賽機(jī)位桌面“微網(wǎng)站設(shè)計(jì)與開發(fā)比賽任務(wù).rar”自

解壓文件，所有比賽素材將會(huì)解壓到桌面“微網(wǎng)站設(shè)計(jì)與開發(fā)比

賽任務(wù)”文件夾中，每任務(wù)所需的素材和樣張分別存放“任務(wù)一”、

“任務(wù)二”子文件夾內(nèi)；

3.請(qǐng)比賽選手在桌面上自行建立新文件夾，名稱為“×××參

賽作品”。其中×××為三位賽位號(hào)，比如賽位號(hào)為001號(hào)，文件

夾名稱為“001參賽作品”；賽位號(hào)為017號(hào)，文件夾名稱為“017

參賽作品”并在請(qǐng)此文件夾中分別建立名稱為“任務(wù)”、“任務(wù)

四”子文件夾；

4.在桌面文件夾“×××參賽作品”內(nèi)“任務(wù)”文件夾下應(yīng)建

立頁面名稱子文件夾，子文件夾下建立“效果圖”、“切片”、“文

字”子文件夾，存放相應(yīng)的文件。如圖1-1微網(wǎng)站結(jié)構(gòu)和素材

整理參考示例；

【第1頁共15頁】

圖1-1微網(wǎng)站結(jié)構(gòu)和素材整理參考示例

5.作品提交。最終比賽提交微網(wǎng)站成果需以APK格式保存

在桌面文件夾“×××參賽作品”下“任務(wù)四”子文件夾中；

注意：

解壓密碼由裁判現(xiàn)場(chǎng)公布；

若在參賽選手桌面“×××參賽作品”文件夾內(nèi)無指定任務(wù)文

件夾及相關(guān)文件，會(huì)被減去相應(yīng)分?jǐn)?shù)；

微網(wǎng)站制作過程中請(qǐng)使用谷歌瀏覽器，并注意隨時(shí)保存，瀏

覽微網(wǎng)站使用谷歌瀏覽器；谷歌瀏覽器移動(dòng)端網(wǎng)站預(yù)覽方法如下

圖所示：

第一步：打開谷歌瀏覽器，按F12，點(diǎn)擊“移動(dòng)設(shè)備模

式”；

【第2頁共15頁】

第二步：在平臺(tái)里點(diǎn)擊編輯器右上角預(yù)覽按鈕，復(fù)制鏈接；

第三步：將復(fù)制的鏈接粘貼在谷歌瀏覽器地址欄。

【第3頁共15頁】

注：如果顯示不完整，請(qǐng)先點(diǎn)擊Responsive選擇任意一

款手機(jī)，刷新界面確定頁面完整后輸入405*640

賽題所涉及的手冊(cè)放在桌面“資料”文件夾中，pdf

文件建議用瀏覽器方式打開查看；

（二）比賽任務(wù)及要求

制作要求：

1.在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中創(chuàng)建站點(diǎn)“易通房產(chǎn)”，按

照制作要求創(chuàng)建微網(wǎng)站頁面；

2.按照微網(wǎng)站結(jié)構(gòu)和素材整理參考示例（見圖1-1），對(duì)

素材進(jìn)行加工并重新分類整理歸納。

任務(wù)一：健康醫(yī)療微網(wǎng)站頁面制作

【第4頁共15頁】

1.分類歸檔

按照微網(wǎng)站結(jié)構(gòu)和素材整理參考示例（見圖1-1），對(duì)素

材進(jìn)行重新分類整理歸納。

2.制作切片

○1按制作的UI效果圖進(jìn)行合理切片，符合移動(dòng)端頁面的

設(shè)計(jì)要求，不允許使用整幅圖片；

○2將制作微網(wǎng)站所需的切片，存放于“桌面：\XXX參賽

作品\任務(wù)”相應(yīng)頁面“切片”文件夾內(nèi)。

3.微網(wǎng)站頁面制作要求

○1易通首頁

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“易通首頁”；

設(shè)置頁面中的九項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1

秒）從左到右移入的動(dòng)畫效果；

設(shè)置頁面中“世茂湖濱花園”、“周邊附近”、“交通

便利”三項(xiàng)，為依次（延遲間隔0.1秒）從右到左移入的動(dòng)

畫效果；

頁面中“8000家”、“10萬”、“12年”使用“文字”

組件制作，字體設(shè)置為“微軟雅黑”，字號(hào)設(shè)置為“20px”，

【第5頁共15頁】

字體顏色為“白色”；

頁面中“全國門店”、“全國經(jīng)紀(jì)人”、“傾清服務(wù)”

使用“文字”組件制作，字體設(shè)置為“微軟雅黑”，字號(hào)設(shè)

置為“14px”，字體顏色為“白色”；

頁面中“中海昊宇天下”、“和光悅府”二項(xiàng)，為依

次（延遲間隔0.1秒）中心放大的動(dòng)畫效果；

在頁面右下角添加“”圖片，編寫代碼實(shí)現(xiàn)點(diǎn)

擊“”返回頁面頂部；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○2租房

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“租房”；

頁面頂端添加4張輪播圖

設(shè)置頁面中的“整租”、“合租”、“資訊”、“新房源”

四項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1秒）從左到右移入的

動(dòng)畫效果；

設(shè)置頁面中的“精品房源”、“熱門房源”、“公寓建

筑”、“降價(jià)專區(qū)”四項(xiàng)導(dǎo)航菜單為依次（延遲間隔0.1秒）

從右到左移入的動(dòng)畫效果；

【第6頁共15頁】

設(shè)置頁面“特惠房源”下的四項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）淡入的動(dòng)畫效果；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○3二手房

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“二手房”；

設(shè)置頁面中的五項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1

秒）從左到右移入的動(dòng)畫效果；

設(shè)置頁面“東城三居室”、“低稅費(fèi)兩房”、“5年內(nèi)

一居”、“二手房月報(bào)”四項(xiàng)內(nèi)容，為依次（延遲間隔0.1秒）

光速進(jìn)入的動(dòng)畫效果；

設(shè)置頁面“全部房源”下的二項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）從左到右彈入的動(dòng)畫效果；

使用“QQ客服”組件，設(shè)置QQ號(hào)碼為4008471008，

并按照效果圖調(diào)整圖標(biāo)，將“position”調(diào)整為固定；

使用“一鍵撥號(hào)”組件，設(shè)置電話號(hào)碼為

4008471008，并按照效果圖調(diào)整圖標(biāo)，將“position”調(diào)整

為固定；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○4購房資格

【第7頁共15頁】

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“購房資格”；

設(shè)置頁面中的八項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1

秒）第一行從左到右，第二行從右到左移入的動(dòng)畫效果；

設(shè)置頁面“購房流程”下的四項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）淡入的動(dòng)畫效果；

設(shè)置頁面“裝修流程”下的四項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）從左到右移入的動(dòng)畫效果；

設(shè)置頁面“購房資格”下的四項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）從右到左移入的動(dòng)畫效果；

在頁面右下角添加“”圖片，編寫代碼實(shí)現(xiàn)點(diǎn)擊

“”返回頁面頂部；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○5裝修

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“裝修”；

設(shè)置頁面中的四項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1

秒）從左到右移入的動(dòng)畫效果；

設(shè)置頁面“居家經(jīng)驗(yàn)”、“效果圖”、“學(xué)裝修”三項(xiàng)

【第8頁共15頁】

內(nèi)容，為依次（延遲間隔0.1秒）從右到左的移入的動(dòng)畫效

果；

設(shè)置頁面“真實(shí)案例”、“裝修攻略”、“熱門專題”

三項(xiàng)內(nèi)容，為依次（延遲間隔0.1秒）從左到右彈入的動(dòng)畫

效果；

設(shè)置頁面“VR看裝修”下的四項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）從右到左移入的動(dòng)畫效果；

修改關(guān)鍵性代碼實(shí)現(xiàn)“返回頂部默認(rèn)隱藏”效果，

制作和添加“”圖片，默認(rèn)隱藏狀態(tài)，當(dāng)頁面向下滑動(dòng)

顯示，點(diǎn)擊“”返回頁面頂部。

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○6裝修攻略

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“裝修攻略”；

設(shè)置頁面“裝修前”下的三項(xiàng)導(dǎo)航，為依次（延遲

間隔0.1秒）從上到下彈入的動(dòng)畫效果；

設(shè)置頁面“裝修中”下的三項(xiàng)導(dǎo)航，為依次（延遲

間隔0.1秒）淡入的動(dòng)畫效果；

設(shè)置頁面“裝修后”下的三項(xiàng)導(dǎo)航，為依次（延遲

間隔0.1秒）從左到右移入的動(dòng)畫效果；

【第9頁共15頁】

添加部分代碼實(shí)現(xiàn)“提示廣告特效”，為頁面添加廣

告，廣告可單擊“跳過”或5秒后自動(dòng)關(guān)閉，將

“position”調(diào)整為固定。

○7商城

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“商城”；

頁面頂端添加4張輪播圖

設(shè)置頁面中的五項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1

秒）從左到右彈入的動(dòng)畫效果；

設(shè)置頁面中“10元”、“20元”、“50元”滿減卷，

為依次（延遲間隔0.1秒）從右到左彈入的動(dòng)畫效果；

設(shè)置頁面“熱門產(chǎn)品”下的五項(xiàng)導(dǎo)航，為依次（延

遲間隔0.1秒）淡入的動(dòng)畫效果；

設(shè)置頁面中“猜你喜歡”添加4張輪播圖；

在頁面右下角添加“”圖片，編寫代碼實(shí)現(xiàn)點(diǎn)擊

“”返回頁面頂部；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○8折扣產(chǎn)品

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

【第10頁共15頁】

新建頁面命名為“折扣產(chǎn)品”；

設(shè)置頁面中的八項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1

秒）從右到左彈入的動(dòng)畫效果；

設(shè)置頁面“掌柜推薦”下的四項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）從左到右彈入的動(dòng)畫效果；

設(shè)置頁面“創(chuàng)意專區(qū)”下的二項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）淡入的動(dòng)畫效果；

設(shè)置頁面中的“七天退貨”、“正品保證”、“售后保

障”三項(xiàng)內(nèi)容，為依次（延遲間隔0.1秒）從下到上彈入的

動(dòng)畫效果；

修改關(guān)鍵性代碼實(shí)現(xiàn)“返回頂部默認(rèn)隱藏”效果，

制作和添加“”圖片，默認(rèn)隱藏狀態(tài)，當(dāng)頁面向下滑動(dòng)

顯示，點(diǎn)擊“”返回頁面頂部；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○9發(fā)現(xiàn)

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“發(fā)現(xiàn)”；

設(shè)置頁面中的五條資訊，為依次（延遲間隔0.1秒）

從左到右進(jìn)入的動(dòng)畫效果；

根據(jù)需求編寫代碼實(shí)現(xiàn)“彈出菜單”效果，實(shí)現(xiàn)點(diǎn)

【第11頁共15頁】

擊“易通?！睆棾霾藛?，效需要與效果圖一致。

○10個(gè)人中心

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“個(gè)人中心”；

設(shè)置頁面中的“賬戶余額”、“預(yù)付金”、“優(yōu)惠券”、

“金幣”四項(xiàng)導(dǎo)航菜單，為依次（延遲間隔0.1秒）從左到

右移入的動(dòng)畫效果；

設(shè)置頁面“常用功能”下的八項(xiàng)內(nèi)容，為依次（延

遲間隔0.1秒）從右到左彈入的動(dòng)畫效果；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

○11裝修設(shè)計(jì)

在微網(wǎng)站設(shè)計(jì)與開發(fā)平臺(tái)中按照提供的UI效果圖進(jìn)行合理

切片，完成頁面制作，保證頁面效果完全一致。

新建頁面命名為“裝修設(shè)計(jì)”；

設(shè)置頁面中的“家裝”、“景觀”、“家具”、“理論”

四項(xiàng)導(dǎo)航菜單，依次（延遲間隔0.1秒）從左到右移入的動(dòng)

畫效果；

設(shè)置頁面中的四條資訊，依次（延遲間隔0.1秒）

從右到左彈入的動(dòng)畫效果；

通過修改THML代碼，實(shí)現(xiàn)五項(xiàng)底部菜單。

【第12頁共15頁】

任務(wù)三：微網(wǎng)站頁面交互

○1易通首頁

【租房】菜單鏈接到“租房”頁面；

【二手房】菜單鏈接到“二手房”頁面；

【裝修】菜單鏈接到“裝修”頁面；

【商城】菜單鏈接到“商城”頁面；

底部菜單【首頁】按鈕鏈接到“易通首頁”頁面；

底部菜單【發(fā)現(xiàn)】按鈕鏈接到“發(fā)現(xiàn)”頁面；

底部菜單【我的】按鈕鏈接到“個(gè)人中心”頁面。

○2租房

底部菜單【首頁】按鈕鏈接到“易通首頁”頁面；

底部菜單【發(fā)現(xiàn)】按鈕鏈接到“發(fā)現(xiàn)”頁面；

底部菜單【我的】按鈕鏈接到“個(gè)人中心”頁面。

○3二手房

【購房資格】菜單鏈接到“購房資格”頁面；

底部菜單【首頁】按鈕鏈接到“易通首頁”頁面；

底部菜單【發(fā)現(xiàn)】按鈕鏈接到“發(fā)現(xiàn)”頁面；

底部菜單【我的】按鈕鏈接到“個(gè)人中心”頁面。

○4購房資格

底部菜單【首頁】按鈕鏈接到“易通首頁”頁面；

底部菜單【發(fā)現(xiàn)】按鈕鏈接到“發(fā)現(xiàn)”頁面；

【第13頁共15頁】

底部菜單【我的】按鈕鏈接到“個(gè)人中心”頁面。

○5裝修

頁面中的“”鏈接到“裝修攻略”頁面；

底部菜單【首頁】按鈕鏈接到“易通首頁”頁面；

底部菜單【發(fā)現(xiàn)】按鈕鏈接到“發(fā)現(xiàn)”頁面；

底部菜單【我的】按鈕鏈接到“個(gè)人中心”頁面。

○6裝修攻略

左上角“<”圖片鏈接到“裝修”頁面；

○7商城

【折扣產(chǎn)品】菜