中华青铜文明完整代码地址https://www.aiyuanma.vip/posts/homework-qingtongwenhua一、项目简介中华青铜文明青铜器博物馆是一个面向文化传播与互动体验的静态 Web 展示项目。网站以中华青铜文明为主线从夏商周至秦汉的历史脉络出发系统呈现青铜器的历史渊源、器型分类、纹饰艺术、铸造工艺与三星堆专题等内容并辅以数字展厅、文物对话、知识挑战等互动模块帮助用户以沉浸式方式了解与感受青铜文化。项目采用原生 HTML、CSS、JavaScript 构建不依赖后端服务可直接通过浏览器打开访问用户登录与注册数据保存在浏览器本地存储中。二、技术栈类别说明页面结构HTML5样式CSS3各页面独立样式 公共样式common.css脚本JavaScriptjQuery动画Animate.css轮播Swiper3D 展示Three.js三星堆 3D 沉浸页多媒体图片、视频资源三、功能模块介绍1. 首页index.html网站入口与总览页主要包含全屏 Banner 与粒子背景动效历史渊源时间线从夏商萌芽到秦汉传承五个阶段概览青铜艺术卡片礼器、兵器、乐器、生活用器四大类别介绍传承保护板块政策支持、传承人培养、走进校园、文旅融合等方向展示统一顶部导航与页脚支持滚动动画与回到顶部2. 历史溯源history.html以「吉金铸史」为主题深入梳理青铜文明发展脉络首屏大标题与滚动引导交互式历史时间轴按朝代/阶段展示关键事件与背景各时期配图与文字说明呈现从夏商到秦汉的青铜礼乐演变3. 器型分类type.html系统介绍青铜器的主要器型与用途首屏 Swiper 轮播展示代表性器物按礼器、乐器、兵器、生活用器等类别分类浏览各类器物配图、名称、功能与历史背景说明4. 纹饰艺术pattern.html聚焦青铜器表面装饰与符号体系首屏轮播展示饕餮纹、夔龙纹、凤鸟纹等典型纹饰分栏介绍饕餮纹、夔龙纹、凤鸟纹、云雷纹、蟠螭纹等纹饰类型说明纹饰的寓意、时代特征与艺术价值5. 三星堆专题sanxingdui.html / sanxingdui-3d.html以古蜀三星堆文化为核心的专题模块专题页震撼首屏、数据概览、代表性文物介绍、发现历程与文化解读3D 沉浸观赏页基于 Three.js 的全屏 3D 文物展示支持模型旋转、缩放、自动旋转可切换场景背景青墨、深褐、暖沙、墨绿、暮紫等可切换材质预设原色、青铜、铜绿、鎏金等提供重置视角、全屏等控制功能6. 数字展厅gallery.html虚拟博物馆式浏览体验左侧器物目录右侧视频与详情展示收录青铜大立人像、青铜纵目面具、叠瓣龙纹鼎、青铜人头像等代表性文物点击目录项切换对应文物的视频播放与文字介绍年代、类型、尺寸、描述等7. 铸铜工艺craft.html介绍古代青铜铸造技术与流程工艺概述从矿石到成器的整体流程范铸法、失蜡法等主要铸造方法的图文说明各步骤制模、合范、熔炼、浇铸、修整等的分步展示火焰粒子等视觉装饰强化「炉火匠心」主题8. 互动区interact.html「与文物对话」沉浸式互动体验选择四位文物守护者青铜大立人像、青铜纵目面具、叠瓣龙纹鼎、青铜人头像切换文物后更新展示图与对话内容模拟与文物进行问答式对话以第一人称视角讲述文物背后的故事与历史9. 知识挑战quiz.html青铜文明主题趣味测验共 10 道选择题涵盖历史、器型、纹饰、工艺、三星堆等知识点答题进度与即时反馈结束后展示得分与评价巩固学习成果10. 登录注册login.html用户账户管理前端本地实现登录 / 注册 Tab 切换用户名与密码校验注册信息存入浏览器本地存储支持「记住用户名」登录成功后导航栏显示用户名与退出按钮已登录状态下可查看登录时间与退出操作四、公共能力全站通过公共脚本与样式实现一致体验能力说明统一导航header-menu.js动态生成导航菜单自动高亮当前页并根据登录状态显示「登录」或「用户名 退出」统一页脚footer.js按页面生成对应文案的页脚滚动交互导航栏滚动变色、元素进入视口动画、回到顶部按钮移动端适配汉堡菜单、响应式布局视觉风格青铜色调、纹饰装饰、粒子与过渡动画整体呈现博物馆气质五、目录与文件结构homework-qingtongwenhua/ # 项目根目录 │ ├── 项目说明.md # 项目说明文档本文件 │ ├── index.html # 首页 ├── history.html # 历史溯源 ├── type.html # 器型分类 ├── pattern.html # 纹饰艺术 ├── sanxingdui.html # 三星堆专题 ├── sanxingdui-3d.html # 三星堆 3D 沉浸观赏 ├── gallery.html # 数字展厅 ├── craft.html # 铸铜工艺 ├── interact.html # 互动区 ├── quiz.html # 知识挑战 ├── login.html # 登录注册 │ ├── common.css # 全站公共样式导航、页脚、通用组件等 ├── index.css # 首页样式 ├── history.css # 历史溯源页样式 ├── type.css # 器型分类页样式 ├── pattern.css # 纹饰艺术页样式 ├── sanxingdui.css # 三星堆专题页样式 ├── sanxingdui-3d.css # 三星堆 3D 页样式 ├── gallery.css # 数字展厅页样式 ├── craft.css # 铸铜工艺页样式 ├── interact.css # 互动区页样式 ├── quiz.css # 知识挑战页样式 ├── login.css # 登录注册页样式 │ ├── css/ # 第三方样式库 │ ├── animate.min.css # Animate.css 动画库 │ └── swiper-bundle.min.css # Swiper 轮播组件样式 │ ├── js/ # 脚本目录 │ ├── jquery.min.js # jQuery 库 │ ├── swiper-bundle.min.js # Swiper 轮播组件 │ ├── common.js # 公共脚本滚动动画、回到顶部、粒子等 │ ├── header-menu.js # 统一导航栏生成与登录状态 │ ├── footer.js # 统一页脚生成 │ ├── gallery.js # 数字展厅交互逻辑 │ ├── sanxingdui.js # 三星堆专题页交互 │ └── sanxingdui-viewer.js # 三星堆 3D 模型展示Three.js │ ├── images/ # 图片资源 │ ├── logo.png # 站点 Logo │ ├── banner*.png / banner*.jpg # 各页 Banner 与背景图 │ ├── type/ # 器型分类相关图片 │ ├── pattern/ # 纹饰艺术相关图片 │ ├── dalirenxiang.jpg # 青铜大立人像等文物图 │ ├── qingtongmianju.jpg │ ├── longwending.jpg │ ├── touxiang.jpg │ ├── sanxingdui.png # 三星堆专题配图 │ └── … # 其他页面配图与装饰素材 │ ├── videos/ # 视频资源数字展厅播放 │ ├── dalirenxiang.mp4 # 青铜大立人像 │ ├── qingtongmianju.mp4 # 青铜纵目面具 │ ├── longwending.mp4 # 叠瓣龙纹鼎 │ └── touxiang.mp4 # 青铜人头像 │ └── 3d/ # 3D 模型资源备用 └── model.glb # GLB 格式 3D 模型文件六、页面导航关系首页 ├── 历史溯源 ├── 器型分类 ├── 纹饰艺术 ├── 三星堆专题 ──→ 3D 沉浸观赏 ├── 数字展厅 ├── 铸铜工艺 ├── 互动区 ├── 知识挑战 └── 登录 / 注册七、使用说明将项目文件夹完整下载或克隆到本地。使用现代浏览器Chrome、Edge、Firefox、Safari 等打开index.html即可浏览。三星堆 3D 页需联网加载 Three.js 及远程 3D 模型资源若网络不可用3D 功能可能无法正常显示。数字展厅依赖videos/目录下的本地视频文件请确保资源完整。登录注册为前端演示功能用户数据保存在当前浏览器的本地存储中清除浏览器数据后账户信息将丢失。八、项目定位本项目适用于青铜文化、非遗主题的 Web 前端课程大作业展示博物馆、文化展览类的静态宣传与科普站点HTML/CSS/JavaScript 多页面站点结构与交互效果的实践参考