切图——>重构——>前端——>优化
知道原生的JS代码，了解Html5API，了解WampServer。
结构层为index.html
1 <!DOCTYPE html> 2 <html lang="Zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>贺春</title> 6 <link rel="stylesheet" type="text/css" href="CSS/style.css"> 7 <script type="text/javascript" src="JS/script.js"></script><!--defer页面运行完再进行js--> 8 <!--解决第三页页面变小的问题--> 9 <!--X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。--> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 11 <!--viewport 是用户网页的可视区域 12 width=device-width:宽度等于屏幕宽度 13 initial-scale=1：初始化为1 14 minimum-scale=1, maximum-scale=1:最小最大都为1 15 user-scalable=no：用户不能缩放--> 16 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 17 <!--format-detection —— 格式检测，用来检测html里的一些格式，telephone=no 禁止把数字转化为拨号链接--> 18 <meta name="format-detection" content="telephone=no"> 19 20 </head> 21 <body> 22 <div class="music"> 23 <img src="images/music_pointer.png"> 24 <img class="play" id="music" src="images/music_disc.png"> 25 </div> 26 <div class="page" id="page1"> 27 <div class="bg"></div> 28 <div class="p1_lantern">点击屏幕<br>开启好运2018</div> 29 <div class="baozi"></div> 30 <div class="p1_words">包子祝您新年快乐</div> 31 </div> 32 <div class="page" id="page2"> 33 <div class="bg p2_bg_loading"></div> 34 <div class="bg"></div> 35 <div class="p2_circle"></div> 36 <div class="p2_2018"></div> 37 </div> 38 <div class="page" id="page3"> 39 <div class="bg"></div> 40 <div class="p3_logo"></div> 41 <div class="p3_title"></div> 42 <div class="p3_blessing"></div> 43 </div> 44 <audio autoplay="true"><!--autoplay自动播放--> 45 <source src="Khristian%20Araneda%20-%20New%20Years.mp3" type="audio/mpeg"> 46 </audio> 47 </body> 48 </html>