企业官网建设流程全解析

本草纲目溯源-源代码

一、项目简介

「本草纲目溯源」是一款以中国传统医药文化为主题的静态展示网站。项目以明代李时珍所著《本草纲目》为切入点，通过首页、名人、著作、药材四大模块，串联中医发展脉络与经典典籍、代表性人物及常见药材知识，整体采用古风视觉与竖排文字排版，配合入场动画、3D 轮播、画卷式详情等交互，呈现「溯本求源」的阅读体验。

技术形态：纯前端多页面应用（HTML + CSS + JavaScript），无后端依赖，可直接在浏览器中打开运行。

主要依赖：jQuery、Swiper 轮播库、Animate.css 动画库。

二、功能介绍

2.1 首页（index.html）

• 展示「本草溯源」竖排标题，配合逐字入场动画。
• 中间区域以竖排方式逐列呈现中医起源与《本草纲目》相关简介文案。
• 右侧展示人物动图与「点击进入」入口，引导用户进入名人模块。
• 顶部公共导航栏可在各模块间切换。

2.2 公共导航（common-header.js）

• 全站统一的顶部导航：首页、名人、著作、药材。
• 支持当前页高亮、Logo 展示及导航项 hover 动画效果。
• 各列表页统一调用，保证风格与交互一致。

2.3 名人模块

列表页（mingren.html）

• 以 3D 旋转木马形式展示六位中医药历史名人：神农、扁鹊、张仲景、葛洪、华佗、李时珍。
• 每张人物卡片采用画卷背景，点击可跳转至对应详情。

详情页（mingrenDetail.html）

• 通过 URL 锚点（如#shennong）定位具体人物。
• 顶部提供返回列表按钮与「名人介绍」标题栏。
• 侧边目录导航便于在多位名人之间快速切换。
• 展示人物立绘与生平、贡献等介绍正文。

2.4 著作模块

列表页（zhuzuo.html）

• 使用 Swiper 轮播展示六部中医经典著作：神农本草经、黄帝内经、难经、伤寒杂病论、肘后备急方、本草纲目。
• 著作封面置于画轴样式框架内，支持左右切换与依次入场动画。
• 点击可进入对应著作详情。

详情页（zhuzuoDetail.html）

• 通过 URL 锚点定位具体著作。
• 顶部返回按钮与「著作介绍」标题栏。
• 章节目录导航，方便在多部著作间浏览。
• 展示著作封面与内容概要介绍。

2.5 药材模块

列表页（yaocai.html）

• 四宫格展示四种药材：黄芪、白术、黄精、党参。
• 药材卡片依次「砸地」入场，并伴随页面轻微震动感，增强视觉反馈。
• 点击卡片进入药材详情。

详情页（yaocaiDetail.html）

• 通过 URL 锚点定位具体药材。
• 左侧/中央展示药材主图，右侧以画卷竖排文字呈现功效、性味等说明。
• 支持属性标注交互：以连线方式标注根、叶、花等部位及其药性说明，便于理解药材结构。

2.6 其他

• 0601.html：名人 3D 轮播的早期原型页面，供参考，非正式入口。
• 演示文件：包含项目演示视频，便于快速了解整体效果与操作流程。

三、目录与文件结构

homework-bencaogangmu/ ├── index.html # 首页 ├── mingren.html # 名人列表页 ├── mingrenDetail.html # 名人详情页 ├── zhuzuo.html # 著作列表页 ├── zhuzuoDetail.html # 著作详情页 ├── yaocai.html # 药材列表页 ├── yaocaiDetail.html # 药材详情页 ├── 0601.html # 3D 轮播原型页（非正式入口） ├── 项目说明.md # 本说明文档 │ ├── css/ # 样式文件 │ ├── public.css # 公共样式（背景、布局等） │ ├── fonts.css # 字体引入与定义 │ ├── index.css # 首页样式 │ ├── mingren.css # 名人列表页样式 │ ├── mingrenDetail.css # 名人详情页样式 │ ├── zhuzuo.css # 著作列表页样式 │ ├── zhuzuoDetail.css # 著作详情页样式 │ ├── yaocai.css # 药材列表页样式 │ ├── yaocaiDetail.css # 药材详情页样式 │ ├── animate.min.css # Animate.css 动画库 │ └── swiper-bundle.min.css # Swiper 轮播样式 │ ├── js/ # 脚本文件 │ ├── jquery-3.1.1.min.js # jQuery 库 │ ├── swiper-bundle.min.js # Swiper 轮播库 │ ├── common-header.js # 公共导航栏 │ ├── back-btn.js # 详情页返回按钮 │ ├── 3d-carousel.js # 3D 旋转木马组件 │ ├── index.js # 首页动画逻辑 │ ├── mingren-data.js # 名人数据 │ ├── mingren.js # 名人列表页逻辑 │ ├── mingren-detail.js # 名人详情页逻辑 │ ├── zhuzuo-data.js # 著作数据 │ ├── zhuzuo.js # 著作列表页逻辑 │ ├── zhuzuo-detail.js # 著作详情页逻辑 │ ├── yaocai-data.js # 药材数据 │ ├── yaocai.js # 药材列表页逻辑 │ └── yaocai-detail.js # 药材详情页逻辑 │ ├── font/ # 自定义字体 │ ├── YunFengFeiYunTi-2.ttf │ ├── 鸿雷板书体（简+繁）.ttf │ └── 鸿雷板书简体-正式版.ttf │ ├── images/ # 图片资源 │ ├── logo.png # 站点 Logo │ ├── nav-bg.png # 导航 hover 背景 │ ├── page-bg.png # 页面背景 │ ├── index-person.gif # 首页人物动图 │ ├── index-entry-bg.png # 首页入口按钮背景 │ ├── mingren-huajuan.png # 名人画卷背景 │ ├── zhuozuo-huazhou.png # 著作画轴框架 │ ├── book-huajuan.png # 书籍画卷素材 │ ├── empty-huajuan.png # 空白画卷素材 │ ├── back-1.png ~ back-3.png # 返回按钮相关素材 │ ├── zhuzuo-prev.png # 著作轮播上一张 │ ├── zhuzuo-next.png # 著作轮播下一张 │ ├── 1神农.png ~ 6李时珍.png # 名人立绘 │ ├── 1神农本草经.png ~ 6本草纲目.png # 著作封面 │ ├── 1黄芪/ # 黄芪素材（index.png、根.png、叶.png、花.png） │ ├── 2白术/ # 白术素材 │ ├── 3黄精/ # 黄精素材 │ └── 4党参/ # 党参素材 │ └── 演示文件/ # 演示资料 └── 演示视频.mp4 # 项目演示录屏

四、使用说明

1. 用浏览器直接打开根目录下的index.html即可访问首页。
2. 通过顶部导航或首页「点击进入」在各模块间浏览。
3. 列表页点击条目进入详情；详情页可通过侧边目录切换内容，或使用返回按钮回到列表。
4. 药材、名人、著作详情页均支持 URL 锚点直达（如yaocaiDetail.html#huangqi）。

五、数据维护说明

• 名人、著作、药材的文案与图片路径集中在js/mingren-data.js、js/zhuzuo-data.js、js/yaocai-data.js中维护。
• 新增条目时需同步更新对应列表页数据及images/下相关图片资源。
• 全站导航菜单项在js/common-header.js的NAV_ITEMS中统一配置。