妲己主题站

妲己主题站

王者荣耀英雄 妲己 的静态主题小站。视觉以「愿照众生和」为基调：黑底、金色点缀、楷体标题、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.html	31 条语音：分组表格、分类 Tab、点击喇叭播放本地音频

全站统一顶部导航（7 项）：首页 → 皮肤 → 介绍 → 技能 → 故事 → 攻略 → 福愿语音。

---

各模块说明

1. 首页（index.html）

• 100vh 全屏主视觉，海报 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.html）

• 4 条官方攻略视频本地收录，列表含序号、封面缩略图、分类标签。
• 右侧 <video> 切换播放，封面与 guides/covers/ 对应。
• 数据：js/guides-mock.js，与 guides/guides.json 一致。

7. 福愿语音（voices.html）

• 31 条语音按大厅 / 移动 / 技能 / 互动 / 剧情分组。
• 档案表格风格列表，喇叭按钮 + 声波动画播放 audio/ 下本地文件。
• 数据：js/audio-mock.js，与 audio/README.md 序号一一对应。

---

本地预览

在项目根目录启动本地 HTTP 服务后访问 http://localhost:8000/index.html。勿用 file:// 打开，否则视频 / 音频可能无法播放。

可用 VS Code Live 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/妲己_魅力之狐/

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-pc-wangzherongyao-daji