妲己主题站完整代码地址https://www.aiyuanma.vip/posts/homework-pc-wangzherongyao-daji王者荣耀英雄妲己的静态主题小站。视觉以「愿照众生和」为基调黑底、金色点缀、楷体标题、1280px 内容区。页面以 HTML CSS 为主仅在列表播放、筛选等场景使用少量 JavaScript媒体资源本地化便于离线演示。一、功能介绍站点地图页面文件功能概述首页index.html一屏沉浸12 套皮肤海报 底部头像 hover 切换背景与文案纯 CSS:has()皮肤skins.html皮肤图鉴分类筛选、海报网格、点击预览弹层愿照众生和可跳转介绍页介绍detail.html愿照·众生和单皮肤深度Banner、宣传视频、皮肤档案、角色介绍与皮肤故事技能skills.html战斗资料四维属性、四技能、231 连招、铭文加点、双套出装参考官网英雄详情故事story.html英雄叙事档案、分章英雄故事、「历史上的 TA」弹层、搭档/克制关系攻略guides.html攻略视频左列表 右播放器分类「全部 / 入门 / 实战」本地 mp4 播放福愿语音voices.html31 条语音分组表格、分类 Tab、点击喇叭播放本地音频全站统一顶部导航7 项首页 → 皮肤 → 介绍 → 技能 → 故事 → 攻略 → 福愿语音。各模块说明1. 首页index.html100vh全屏主视觉海报background-size: cover窗口变窄时从两侧裁切不整体缩小。底部12 套皮肤头像栏悬停同步切换背景海报、皮肤名、代表台词「妲己」标题与属性条固定不变。皮肤顺序与官网 英雄详情页 一致含愿照众生和、魅力维加斯、时之奇旅等全部 12 套。2. 皮肤图鉴skins.html头图 分类 Tab全部 / 传说 / 史诗 / 其他带数量统计。网格展示海报、头像、品级、台词愿照·众生和为大卡并链至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按钮打开弹层。英雄关系三 Tab最佳搭档 / 压制英雄 / 被压制含叙事羁绊姜子牙、大禹等。6. 攻略guides.html4 条官方攻略视频本地收录列表含序号、封面缩略图、分类标签。右侧video切换播放封面与guides/covers/对应。数据js/guides-mock.js与guides/guides.json一致。7. 福愿语音voices.html31 条语音按大厅 / 移动 / 技能 / 互动 / 剧情分组。档案表格风格列表喇叭按钮 声波动画播放audio/下本地文件。数据js/audio-mock.js与audio/README.md序号一一对应。本地预览在项目根目录启动本地 HTTP 服务后访问http://localhost:8000/index.html。勿用file://打开否则视频 / 音频可能无法播放。可用 VS CodeLive Server插件或任意静态站点托管方式。二、标准目录说明daji/ ├── index.html # 首页12 皮肤 hover 换肤 ├── skins.html # 皮肤图鉴 ├── detail.html # 愿照·众生和 介绍页 ├── skills.html # 技能 / 铭文 / 出装 ├── story.html # 英雄故事 / 关系 ├── 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 # 皮肤图鉴数据 │ ├── skins.js # 皮肤筛选与预览弹层 │ ├── skills-mock.js # 技能 / 铭文 / 出装数据 │ ├── skills.js # 技能页锚点、出装 Tab │ ├── story-mock.js # 档案 / 故事 / 关系数据 │ ├── story.js # 故事页关系 Tab、历史弹层 │ ├── guides-mock.js # 攻略视频数据 │ ├── guides.js # 攻略列表与播放器 │ ├── audio-mock.js # 31 条语音数据 │ └── voices.js # 语音列表与播放 │ ├── imgs/ # 静态图片与部分视频 │ ├── logo.webp # 顶栏 Logo │ ├── line.png # 标题两侧装饰线 │ ├── arrow.png # 介绍页 Banner 下箭头 │ ├── btn-play.webp # 视频播放按钮 │ ├── laba.png # 语音页喇叭图标 │ ├── skill/ # 四技能图标 属性条 skill-line.png │ ├── detail/ # 介绍页 Banner、档案、宣传视频与封面 │ ├── skills/ # 技能页出装 icons、铭文、关系英雄头像 │ │ ├── items/ # 装备图标 │ │ ├── runes/ # 铭文图标 │ │ └── heroes/ # 搭档 / 克制英雄头像 │ ├── story/heroes/ # 故事页叙事羁绊头像 │ └── 妲己_{皮肤名}/ # 各皮肤海报 头像共 12 套 │ ├── 妲己_{皮肤名}_海报.jpg │ └── 妲己_{皮肤名}_头像.jpg │ ├── audio/ # 31 条本地语音wav / mp3 │ └── README.md # 序号与台词对照表 │ ├── guides/ # 攻略视频资源 │ ├── guides.json # 视频清单tid、文件名、封面 │ ├── covers/ # 列表与播放器封面图 │ ├── *.mp4 # 4 条攻略视频 │ └── README.md # 视频清单说明 │ └── 演示材料/ # 演示用录屏等非站点运行依赖 └── 演示视频.mp4三、约定与说明命名规范皮肤目录imgs/妲己_{皮肤名}/内含_海报.jpg、_头像.jpg。语音文件audio/{三位序号}_{分类}.wav|mp3与audio-mock.js的src一致。攻略视频guides/{三位序号}_daji_*.mp4与guides-mock.js的src一致。Mock 数据各*-mock.js为页面数据源增删内容时优先改 mock并保持与 JSON / README 同步。技术要点内容区最大宽度1280px与顶栏内层对齐。首页皮肤切换无 JS依赖 CSS:has()需较新浏览器。列表 / 表格风格统一避免「AI 卡片风」左侧金线装饰。代码注释使用中文标识符与第三方 API 名可保留英文。参考来源英雄 / 皮肤 / 技能 / 故事官网妲己详情愿照众生和叙事detail.html官方皮肤文案攻略视频王者官网视频 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/妲己_魅力之狐/