HTML 动漫主题站模板（名侦探柯南风格）

✨ 项目特色

🎨 设计亮点

• 深色神秘配色：深蓝/深灰配色方案，营造推理悬疑氛围
• 案件档案风格：采用档案卡片式设计，突出案件和角色信息
• 剧集列表展示：清晰的剧集列表布局，支持分类浏览
• 响应式布局：完美适配 PC、平板、手机等各类设备
• 动画交互：卡片悬停效果、平滑过渡动画

💻 技术特点

• 纯前端实现：HTML5 + CSS3 + JavaScript，无需后端即可运行
• 代码规范：结构清晰，CSS 模块化（style.css、form.css、list.css），注释完整
• 无第三方依赖：代码干净，无第三方库，无第三方标识
• 性能优化：轻量级设计，图片优化，加载速度快
• SEO 友好：语义化标签，利于搜索引擎优化

📱 功能模块

• ✅ 首页展示：Banner 轮播、最新剧集、角色推荐、案件档案
• ✅ 剧集列表：剧集分类、列表展示、详情跳转
• ✅ 角色介绍：角色卡片展示、详细信息、关系图谱
• ✅ 案件档案：案件列表、案件详情、推理线索
• ✅ 联系我们：联系表单、地址信息
• ✅ 用户系统：登录页面、注册页面，表单验证

🚀 快速开始

环境要求

• 现代浏览器（Chrome、Firefox、Safari、Edge 等）
• 无需安装任何依赖，直接打开即可使用

使用步骤

1. 下载项目

2. 打开项目

   • 直接用浏览器打开 index.html 即可预览
   • 或使用本地服务器（推荐）：

     # 使用 Python
     python -m http.server 8000
     
     # 使用 Node.js
     npx http-server
     

3. 自定义配置

   • 修改各 HTML 文件中的标题和内容
   • 替换 images/ 目录下的图片资源
   • 调整 css/ 目录下的样式文件，修改主题色

📂 项目结构

html动漫模板3/
├── index.html          # 首页
├── episodes.html       # 剧集列表
├── characters.html     # 角色介绍
├── cases.html          # 案件档案
├── contact.html        # 联系我们
├── login.html          # 登录页面
├── register.html       # 注册页面
├── css/                # 样式文件
│   ├── style.css       # 主样式文件
│   ├── form.css        # 表单样式
│   └── list.css        # 列表样式
├── js/                 # JavaScript 文件
│   ├── main.js         # 主要脚本
│   └── form.js         # 表单脚本
└── images/             # 图片资源
    ├── thumb-1920-*.jpg
    └── thumb-440-*.webp

🎯 适用场景

• 🔍 推理动漫站：推理类动漫作品展示、案件分析
• 👥 角色档案：动漫角色详细介绍、关系图谱
• 📚 剧集管理：动漫剧集列表、分类管理
• 🎬 案件档案：推理案件整理、线索展示
• 🏫 校园社团：推理社团、动漫社团官网

🔧 自定义指南

修改主题色

在 css/style.css 中搜索颜色值，替换为你喜欢的深色系配色方案。

更换 Logo 和图片

• 替换 images/ 目录下的所有图片
• 修改 HTML 中的 alt 属性，保持语义化

添加新页面

1. 复制现有页面作为模板
2. 修改导航菜单（所有页面的导航结构一致）
3. 调整页面内容区域

修改导航菜单

所有页面的导航菜单结构一致，在 `