妲己主題站完整代碼地址https://www.aiyuanma.vip/posts/homework-pc-wangzherongyao-daji王者榮耀英雄妲己的靜態(tài)主題小站。視覺(jué)以「愿照眾生和」為基調(diào)黑底、金色點(diǎn)綴、楷體標(biāo)題、1280px 內(nèi)容區(qū)。頁(yè)面以 HTML CSS 為主僅在列表播放、篩選等場(chǎng)景使用少量 JavaScript媒體資源本地化便于離線演示。一、功能介紹站點(diǎn)地圖頁(yè)面文件功能概述首頁(yè)index.html一屏沉浸12 套皮膚海報(bào) 底部頭像 hover 切換背景與文案純 CSS:has()皮膚skins.html皮膚圖鑒分類(lèi)篩選、海報(bào)網(wǎng)格、點(diǎn)擊預(yù)覽彈層愿照眾生和可跳轉(zhuǎn)介紹頁(yè)介紹detail.html愿照·眾生和單皮膚深度Banner、宣傳視頻、皮膚檔案、角色介紹與皮膚故事技能skills.html戰(zhàn)斗資料四維屬性、四技能、231 連招、銘文加點(diǎn)、雙套出裝參考官網(wǎng)英雄詳情故事story.html英雄敘事檔案、分章英雄故事、「歷史上的 TA」彈層、搭檔/克制關(guān)系攻略guides.html攻略視頻左列表 右播放器分類(lèi)「全部 / 入門(mén) / 實(shí)戰(zhàn)」本地 mp4 播放福愿語(yǔ)音voices.html31 條語(yǔ)音分組表格、分類(lèi) Tab、點(diǎn)擊喇叭播放本地音頻全站統(tǒng)一頂部導(dǎo)航7 項(xiàng)首頁(yè) → 皮膚 → 介紹 → 技能 → 故事 → 攻略 → 福愿語(yǔ)音。各模塊說(shuō)明1. 首頁(yè)index.html100vh全屏主視覺(jué)海報(bào)background-size: cover窗口變窄時(shí)從兩側(cè)裁切不整體縮小。底部12 套皮膚頭像欄懸停同步切換背景海報(bào)、皮膚名、代表臺(tái)詞「妲己」標(biāo)題與屬性條固定不變。皮膚順序與官網(wǎng) 英雄詳情頁(yè) 一致含愿照眾生和、魅力維加斯、時(shí)之奇旅等全部 12 套。2. 皮膚圖鑒skins.html頭圖 分類(lèi) Tab全部 / 傳說(shuō) / 史詩(shī) / 其他帶數(shù)量統(tǒng)計(jì)。網(wǎng)格展示海報(bào)、頭像、品級(jí)、臺(tái)詞愿照·眾生和為大卡并鏈至detail.html。點(diǎn)擊卡片打開(kāi)全屏預(yù)覽彈層可查看大圖與簡(jiǎn)介。3. 愿照介紹detail.html全屏 Banner arrow.png向下引導(dǎo)動(dòng)畫(huà)。16:9 宣傳視頻imgs/detail/video2.mp4與敘事文案。皮膚檔案檔案2.webp、角色介紹、皮膚故事長(zhǎng)文。4. 技能skills.html錨點(diǎn)導(dǎo)航技能 / 連招 / 銘文 / 出裝滾動(dòng)時(shí) Tab 高亮。四技能卡片圖標(biāo) 冷卻 機(jī)制說(shuō)明。231 連招可視化、三色銘文、加點(diǎn)與召喚師技能、兩套出裝 Tab 切換。5. 故事story.html頭圖英雄故事.jpg 英雄檔案表。分章英雄背景長(zhǎng)文歷史上的 TA按鈕打開(kāi)彈層。英雄關(guān)系三 Tab最佳搭檔 / 壓制英雄 / 被壓制含敘事羈絆姜子牙、大禹等。6. 攻略guides.html4 條官方攻略視頻本地收錄列表含序號(hào)、封面縮略圖、分類(lèi)標(biāo)簽。右側(cè)video切換播放封面與guides/covers/對(duì)應(yīng)。數(shù)據(jù)js/guides-mock.js與guides/guides.json一致。7. 福愿語(yǔ)音voices.html31 條語(yǔ)音按大廳 / 移動(dòng) / 技能 / 互動(dòng) / 劇情分組。檔案表格風(fēng)格列表喇叭按鈕 聲波動(dòng)畫(huà)播放audio/下本地文件。數(shù)據(jù)js/audio-mock.js與audio/README.md序號(hào)一一對(duì)應(yīng)。本地預(yù)覽在項(xiàng)目根目錄啟動(dòng)本地 HTTP 服務(wù)后訪問(wèn)http://localhost:8000/index.html。勿用file://打開(kāi)否則視頻 / 音頻可能無(wú)法播放?？捎?VS CodeLive Server插件或任意靜態(tài)站點(diǎn)托管方式。二、標(biāo)準(zhǔn)目錄說(shuō)明daji/ ├── index.html # 首頁(yè)12 皮膚 hover 換膚 ├── skins.html # 皮膚圖鑒 ├── detail.html # 愿照·眾生和 介紹頁(yè) ├── skills.html # 技能 / 銘文 / 出裝 ├── story.html # 英雄故事 / 關(guān)系 ├── guides.html # 攻略視頻 ├── voices.html # 福愿語(yǔ)音 ├── 項(xiàng)目說(shuō)明.md # 本文件 │ ├── css/ │ ├── header.css # 全站頂欄導(dǎo)航含 fixed 變體 │ ├── index.css # 首頁(yè)主視覺(jué)、皮膚欄、:has 切換 │ ├── skins.css # 皮膚圖鑒 │ ├── detail.css # 介紹頁(yè) │ ├── skills.css # 技能頁(yè) │ ├── story.css # 故事頁(yè) │ ├── guides.css # 攻略頁(yè) │ └── voices.css # 語(yǔ)音頁(yè) │ ├── js/ │ ├── index.js # 首頁(yè)當(dāng)前幾乎無(wú)邏輯預(yù)留 │ ├── detail.js # 介紹頁(yè)視頻播放按鈕 │ ├── skins-mock.js # 皮膚圖鑒數(shù)據(jù) │ ├── skins.js # 皮膚篩選與預(yù)覽彈層 │ ├── skills-mock.js # 技能 / 銘文 / 出裝數(shù)據(jù) │ ├── skills.js # 技能頁(yè)錨點(diǎn)、出裝 Tab │ ├── story-mock.js # 檔案 / 故事 / 關(guān)系數(shù)據(jù) │ ├── story.js # 故事頁(yè)關(guān)系 Tab、歷史彈層 │ ├── guides-mock.js # 攻略視頻數(shù)據(jù) │ ├── guides.js # 攻略列表與播放器 │ ├── audio-mock.js # 31 條語(yǔ)音數(shù)據(jù) │ └── voices.js # 語(yǔ)音列表與播放 │ ├── imgs/ # 靜態(tài)圖片與部分視頻 │ ├── logo.webp # 頂欄 Logo │ ├── line.png # 標(biāo)題兩側(cè)裝飾線 │ ├── arrow.png # 介紹頁(yè) Banner 下箭頭 │ ├── btn-play.webp # 視頻播放按鈕 │ ├── laba.png # 語(yǔ)音頁(yè)喇叭圖標(biāo) │ ├── skill/ # 四技能圖標(biāo) 屬性條 skill-line.png │ ├── detail/ # 介紹頁(yè) Banner、檔案、宣傳視頻與封面 │ ├── skills/ # 技能頁(yè)出裝 icons、銘文、關(guān)系英雄頭像 │ │ ├── items/ # 裝備圖標(biāo) │ │ ├── runes/ # 銘文圖標(biāo) │ │ └── heroes/ # 搭檔 / 克制英雄頭像 │ ├── story/heroes/ # 故事頁(yè)敘事羈絆頭像 │ └── 妲己_{皮膚名}/ # 各皮膚海報(bào) 頭像共 12 套 │ ├── 妲己_{皮膚名}_海報(bào).jpg │ └── 妲己_{皮膚名}_頭像.jpg │ ├── audio/ # 31 條本地語(yǔ)音wav / mp3 │ └── README.md # 序號(hào)與臺(tái)詞對(duì)照表 │ ├── guides/ # 攻略視頻資源 │ ├── guides.json # 視頻清單tid、文件名、封面 │ ├── covers/ # 列表與播放器封面圖 │ ├── *.mp4 # 4 條攻略視頻 │ └── README.md # 視頻清單說(shuō)明 │ └── 演示材料/ # 演示用錄屏等非站點(diǎn)運(yùn)行依賴(lài) └── 演示視頻.mp4三、約定與說(shuō)明命名規(guī)范皮膚目錄imgs/妲己_{皮膚名}/內(nèi)含_海報(bào).jpg、_頭像.jpg。語(yǔ)音文件audio/{三位序號(hào)}_{分類(lèi)}.wav|mp3與audio-mock.js的src一致。攻略視頻guides/{三位序號(hào)}_daji_*.mp4與guides-mock.js的src一致。Mock 數(shù)據(jù)各*-mock.js為頁(yè)面數(shù)據(jù)源增刪內(nèi)容時(shí)優(yōu)先改 mock并保持與 JSON / README 同步。技術(shù)要點(diǎn)內(nèi)容區(qū)最大寬度1280px與頂欄內(nèi)層對(duì)齊。首頁(yè)皮膚切換無(wú) JS依賴(lài) CSS:has()需較新瀏覽器。列表 / 表格風(fēng)格統(tǒng)一避免「AI 卡片風(fēng)」左側(cè)金線裝飾。代碼注釋使用中文標(biāo)識(shí)符與第三方 API 名可保留英文。參考來(lái)源英雄 / 皮膚 / 技能 / 故事官網(wǎng)妲己詳情愿照眾生和敘事detail.html官方皮膚文案攻略視頻王者官網(wǎng)視頻 tid → 本地 mp4四、12 套皮膚一覽序號(hào)皮膚名目錄1愿照·眾生和imgs/妲己_愿照眾生和/2魅力維加斯imgs/妲己_魅力維加斯/3時(shí)之奇旅imgs/妲己_時(shí)之奇旅/4紫羅蘭之誓imgs/妲己_紫羅蘭之誓/5熱情桑巴imgs/妲己_熱情桑巴/6仙境愛(ài)麗絲imgs/妲己_仙境愛(ài)麗絲/7少女阿貍imgs/妲己_少女阿貍/8女仆咖啡imgs/妲己_女仆咖啡/9時(shí)之彼端imgs/妲己_時(shí)之彼端/10青丘·九尾imgs/妲己_青丘九尾/11靈卜魔法imgs/妲己_靈卜魔法/12魅力之狐imgs/妲己_魅力之狐/