HTML非遗守艺人网站模板

✨ 项目特色

🎓 课程作业优势

• ✅ 符合作业要求：包含主页（index.html）+ 4个子页面
• ✅ 即拿即用：下载后可直接使用，也可根据需求修改
• ✅ 代码规范：DIV+CSS布局，结构清晰，注释完整
• ✅ 页面元素齐全：文字、图片、列表、超链接一应俱全
• ✅ 风格统一：所有页面采用统一的传统主题，美观大方
• ✅ 包含表单页面：完整的表单收集信息页面

🎨 设计亮点

• 传统配色：深棕色系（#8B4513, #A0522D, #CD853F）营造传统工艺氛围
• 3D翻转卡片：守艺名录使用3D翻转卡片效果，视觉效果出色
• 时间轴展示：传统工艺页面采用时间轴布局，清晰展示工艺发展
• 精美轮播图：首页大图轮播展示，支持自动播放和手动切换
• 响应式布局：完美适配 PC、平板、手机等各类设备

💻 技术特点

• 纯前端实现：HTML5 + CSS3 + JavaScript，无需后端即可运行
• DIV+CSS布局：采用浮动布局、定位布局和Flex布局
• 代码规范：结构清晰，CSS 模块化，注释完整
• jQuery支持：使用jQuery实现交互效果，代码简洁易懂
• 性能优化：轻量级设计，图片使用背景色占位，加载速度快

📱 功能模块（符合作业要求）

• ✅ 首页（index.html）：轮播图、守艺名录卡片、传统工艺时间轴、传承故事 - 必含
• ✅ 守艺名录页面（artisans.html）：守艺人列表、分类筛选功能 - 子页面
• ✅ 传统工艺页面（crafts.html）：工艺介绍、制作流程 - 子页面
• ✅ 传承故事页面（story.html）：传承故事文章展示 - 子页面
• ✅ 加入我们页面（contact.html）：联系方式、传承人报名表单 - 子页面（包含表单）

总计：1个主页 + 4个子页面（包含表单页），完全满足"至少3个子页面+表单"的要求！

🚀 快速开始

环境要求

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

使用步骤

1. 下载项目

2. 打开项目

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

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

3. 自定义配置

   • 修改各 HTML 文件中的内容信息
   • 替换背景色占位为实际图片
   • 调整 css/ 目录下的样式文件，修改配色方案

📂 项目结构

html非遗守艺人模板1/
├── index.html          # 首页
├── artisans.html       # 守艺名录
├── crafts.html         # 传统工艺
├── story.html          # 传承故事
├── contact.html        # 加入我们（表单页）
├── artisan-detail.html # 守艺人详情页
├── css/                # 样式文件目录
│   ├── reset.css       # 重置样式
│   ├── main.css        # 主样式文件
│   ├── index.css       # 首页样式
│   ├── artisans.css    # 守艺名录样式
│   ├── crafts.css      # 传统工艺样式
│   ├── story.css       # 传承故事样式
│   ├── contact.css     # 表单页面样式
│   └── artisan-detail.css # 详情页样式
├── js/                 # JavaScript 文件目录
│   ├── jquery-1.11.0.js    # jQuery 库（需自行下载）
│   └── main.js         # 项目主脚本
└── img/                # 图片资源目录（目前使用背景色占位）

🎯 独特功能特点

1. 3D翻转卡片效果：守艺名录卡片鼠标悬停时3D翻转，展示详细信息
2. 时间轴布局：传统工艺页面使用时间轴展示，视觉效果独特
3. 分类筛选功能：守艺名录页面支持按工艺类别筛选
4. 表单验证：联系表单包含完整的JavaScript验证功能
5. 响应式设计：适配不同屏幕尺寸

🔧 自定义指南

修改主题色

在 css/main.css 中搜索颜色值，替换为你喜欢的配色方案。主要颜色：

• 主色调：#8B4513（深棕色）
• 辅助色：#A0522D（中棕色）
• 强调色：#CD853F（浅棕色）

替换背景色占位

目前所有图片都使用 background-color 占位，你可以：

• 将背景色替换为 background-image: url('图片路径')
• 保持 background-size: cover 确保图片填充

修改内容

• 在各 HTML 文件中修改文字内容
• 更新守艺人信息、工艺介绍等

💡 使用建议（课程作业必读）

📋 提交前的检查清单

1. ✅ 修改个人信息：将模板中的内容替换为自己的信息
2. ✅ 替换图片：将背景色占位替换为实际图片
3. ✅ 调整内容：修改文字内容，添加个人理解和创意
4. ✅ 检查链接：确保所有页面之间的超链接正常
5. ✅ 测试功能：检查轮播图、表单验证等功能是否正常
6. ✅ 文件命名：按老师要求命名文件夹（学号+姓名）

🔧 技术建议

1. 理解代码：建议仔细阅读代码，理解 DIV+CSS 布局原理
2. 添加创新：在原有基础上添加自己的创意元素
3. 代码注释：保留或添加代码注释，体现学习过程
4. 浏览器兼容：在多个浏览器中测试，确保兼容性

⚠️ 重要提示

1. 严禁直接提交：模板仅供学习参考，请根据课程要求修改内容
2. 理解为主：建议理解代码逻辑，而非直接复制粘贴
3. 添加创新：在模板基础上添加个人创意，避免千篇一律
4. 遵守学术规范：请遵守学校的学术诚信规定

📞 获取方式

• 🌐 项目地址：代码小库 - HTML非遗守艺人模板
• 💰 价格：¥9.9（课程作业专用，超值价格）
• 📧 技术支持：购买后提供使用指导和问题解答
• ✅ 保证运行：提供完整源码，保证本地可正常运行

📚 课程作业评分参考

本模板完全符合以下评分标准：

• ✅ 选题符合要求：非遗守艺人主题贴近传统文化，具有实用价值（10分）
• ✅ 作品完整性：首页+多个子页面，结构完整（20分）
• ✅ 内容丰富：文字、图片、列表、超链接齐全（25分）
• ✅ 技术实现：DIV+CSS布局，HTML5技术，样式美观（30分）
• ✅ 创新性：3D翻转卡片、时间轴布局，设计独特（15分）

** Made with ❤️ by [代码小库] **