HTML 动漫主题站模板（哆啦A梦展示风格）

## ✨ 项目特色

🎨 设计亮点

• 粉蓝清新配色：粉色+蓝色配色方案，营造清新活泼氛围
• 角色卡片设计：精美的角色卡片展示，支持悬停效果
• 故事展示：故事列表和详情页，支持分类浏览
• 响应式布局：完美适配 PC、平板、手机等各类设备
• 动画交互：卡片悬停、按钮渐变、平滑过渡

💻 技术特点

• 纯前端实现：HTML5 + CSS3 + JavaScript，无需后端即可运行
• 代码规范：结构清晰，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动漫模板4/
├── index.html          # 首页
├── characters.html     # 角色介绍
├── stories.html        # 故事展示
├── gadgets.html        # 周边展示
├── contact.html        # 联系我们
├── login.html          # 登录页面
├── register.html       # 注册页面
├── css/                # 样式文件
│   └── *.css           # 样式文件
├── js/                 # JavaScript 文件
│   └── *.js            # 脚本文件
└── images/             # 图片资源
    └── *.jpg

🎯 适用场景

• 👥 角色展示站：动漫角色详细介绍、角色关系
• 📖 故事展示：动漫故事、剧情介绍
• 🛍️ 周边展示：动漫周边商品展示
• 🎬 动漫主题站：动漫作品综合展示
• 🏫 校园社团：动漫社团官网展示

🔧 自定义指南

修改主题色

在 css/ 目录下的样式文件中搜索颜色值，替换为你喜欢的粉蓝色调。

更换 Logo 和图片

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

添加新角色

在 characters.html 中添加新的角色卡片，复制现有卡片结构即可。

修改导航菜单

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