# 《魔法禁书目录》手游官网复刻 — 自适应响应式 ## 项目说明 这是 bilibili.163.com（网易《魔法禁书目录》正版手游官网）的响应式复刻版本。 原游戏已于 2022 年 1 月停运，官网 CDN 域名 `bilibili.res.netease.com` 已失效。 ## 文件结构 ``` . ├── index.html # 主页面（已修复响应式+alt文本） ├── img/ # 图片目录 │ ├── 044c3e7d-d172-45dc-ac95-7e68e4e9ce68.png # Banner 1 (已下载) │ ├── 4a4f6802-fa05-417c-a7cd-3a448a716f2f.jpg # Banner 2 (已下载) │ └── 66170dda-46ba-49a7-a178-0c59509e4c1b.jpg # Banner 3 (已下载) ├── scripts/ # 运行脚本目录 │ ├── download-images.ps1 # PowerShell 图片下载脚本 │ ├── download-from-archive.py # Python archive.org 下载脚本 │ └── replace_urls.py # URL 替换脚本 └── README.md # 本文件 ``` ## 缺失图片情况 | 状态 | 数量 | 说明 | |:---|:---|:---| | 已下载 | 3 张 | `nie.res.netease.com` 域名的 3 张 Banner | | 缺失 | 53 张 | `bilibili.res.netease.com` 域名的角色/标题/视频/特色图 | 缺失图片清单见下方 **缺失图片 URL 列表**。 ## 如何补齐缺失图片 ### 方法一：从 archive.org 下载（推荐） 在你的本地电脑上（能访问 archive.org 的网络环境）运行： ```bash cd scripts pip install requests python download-from-archive.py ``` 下载完成后，再运行： ```bash cd scripts python replace_urls.py ``` 这会将 `index.html` 中所有外部图片 URL 替换为本地 `img/` 路径。 ### 方法二：从其他网络环境下载 如果你的网络可以直接访问 `bilibili.res.netease.com`（部分地区可能仍可解析），运行： ```powershell # PowerShell cd scripts .\download-images.ps1 ``` 然后同样运行 `cd scripts && python replace_urls.py`。 ### 方法三：手动下载 从缺失图片 URL 列表中复制链接，用浏览器或下载工具逐一下载到 `img/` 目录，然后运行 `cd scripts && python replace_urls.py`。 ## 缺失图片 URL 列表 ``` https://bilibili.res.netease.com/pc/gw/20180919101822/img/banner_4a31bb6.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/fea1_9dfad9d.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/fea2_0ed8dea.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/fea3_c9f4eee.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/fea4_ab54327.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/fea5_775a286.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/feature_title_32912c8.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/index3_be71e91.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/name1_edc6aa1.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name2_26f85df.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name3_cf4741c.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name4_6b3e519.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name5_27fe4ca.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name6_e81ffde.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name7_81fc73f.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name8_ab19dfc.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name9_d5ae6bd.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/name10_ebf739c.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/qrcode_7af34b9.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role1_8ce363f.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role1_title_dcdc07e.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role2_5044c89.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role2_title_7c059e8.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role3_eed8f6c.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role3_title_09a78eb.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role4_6265b5f.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role4_title_95033b4.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role5_9363fb8.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role5_title_755fa68.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role6_1f9e48d.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role6_title_aeade4d.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role7_9a6bb2f.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role7_title_3f2fd61.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role8_28dc30a.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role8_title_141d387.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role9_d3993a5.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role9_title_cb36161.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role10_b1b248d.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/role10_title_3aaf5aa.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/share_7f0afc4.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/title1_ba4e318.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/video1_2f8dc78.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/video2_dda8d20.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/video3_b4bc5e8.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/video4_2aa711e.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/video5_b2384e6.jpg https://bilibili.res.netease.com/pc/gw/20180919101822/img/video_title1_0883633.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/video_title2_6b12ba9.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/video_title3_3017191.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/video_title4_b607ea9.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/video_title5_a01ea79.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/wb_icon1_0df8a5c.png https://bilibili.res.netease.com/pc/gw/20180919101822/img/wx_icon1_bb905ca.png ``` ## 响应式特性 - **移动优先**：断点 1200px / 992px / 768px / 480px - **汉堡菜单**：移动端右侧导航变为侧滑抽屉 - **角色轮播**：10 位角色，桌面端左右分栏，移动端单列堆叠 - **CSS Grid**：新闻/视频/特色区自适应列数 - **弹窗适配**：视频播放和适龄提示支持移动端全屏 - **图片占位**：缺失图片时显示渐变背景，页面不塌陷 ## 技术栈 - 纯 HTML + CSS（内嵌式，无外部依赖） - 原生 JavaScript（无 jQuery/框架依赖） - 兼容现代浏览器及 IE11+