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