项目实施
文件目录结构搭建
css目录 - 存放页面相关样式及字体文件
font - 字体文件
entry.css - 页面基础样式
magazine.css - 电子书页面样式
print.css - 打印电子书所需的样式
js目录 - 存放页面相关脚本文件及jQuery库
jquery.min.1.7.js - jquery基础库文件
magazine.js - 页面相关逻辑效果处理脚本
lib目录 - 存放第三方js插件及库
tippyjs - 悬浮提示框插件
hash.js - 根据url变化跳转到对应电子书页面脚本
turn.min.js - 翻页效果插件
pages目录 - 存放电子书页面
pics目录 - 存放页面相关图片文件
res目录 - 存放电子书所需的资源文件
index.html - 入口页面
map.html - 地图显示页面（供电子书内页iframe调用）
引入相关js插件
1. 将 jquery 基础库引入到 index.html；<br>2. 在将第三方插件引入到 index.html；<br>3. 最后将自定义magazine.js 文件引入。<br>注意：引入的标签顺序要和上面引入的顺序一致
引入相关css文件
1. 在 index.html 文件的 <head></head> 标签下引入 entry.css 文件；<br>2. 在 index.html 文件的 <head></head> 标签下引入 magazine.css 文件； <br>3. 在 index.html 文件的 <head></head> 标签下引入 print.css 文件。<br>注意：引入的标签顺序要和上面引入的顺序一致<br>
电子书页面制作
封面制作<br>
在 pages 目录下新建一个 page1.html 文件，用 img 将封面图片引入即可
内容页制作
文件命名规则：pages 目录新建文件并命名为 page$.html，$ 这个表示对应页面码数，封面为1，依次累加
内容页模板：<br><div><div><span><</span><span>div</span><span> </span><span>class</span><span>=</span><span>"</span><span>gradient</span><span>"</span><span>></</span><span>div</span><span>></span></div><div><span><</span><span>div</span><span> </span><span>class</span><span>=</span><span>"</span><span>section</span><span>"</span><span>></span></div><div> <span><</span><span>div</span><span> </span><span>class</span><span>=</span><span>"</span><span>entry</span><span>"</span><span>></span></div><div> 这里插入电子书页面实际内容</div><div> <span></</span><span>div</span><span>></span></div><div><span></</span><span>div</span><span>></span></div></div>
封底制作
同封面，用 img 标签引入封底图片资源即可
注意：电子书页面应为偶数，如果完成时页面数为奇数，可在封底页面之前再新建一个空白模板页
项目部署与维护
测试
发布电子书
