要做一個網站制作規范培訓，之前村長做過一次培訓，但是后來一直沒有實行下去，項目沒有繼續制作，於是幾個月后有一批小伙伴需要重新回來參與制作。讓我來給大家來制作一個相應的制作培訓，聰慧過人（偷懶）的我選擇了直接拿村長的培訓文件來修改一下，補充一下我修改問題的時候遇見的一些常見問題。也正因為如此，不會PPT，怎么辦呢？裝一下高大上，我就選擇了一個js文件，用HTML來制作PPT效果，只需要按鍵切換頁面，不使用它花哨的特效，選擇其中最簡單的一種左右切換就可以了。
impress 簡單的介紹一下這個js插件，用它自己的話來描述說，就是：It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.WARNING
impress.js may not help you if you have nothing interesting to say 😉
默認復制demo viewport標簽
這個是可以修改的，我這里就直接默認復制的了，到時會用筆記本外接投影，1024的剛剛好是這筆記本的分辨率
<meta name="viewport" content="width=1024" />
DOM結構
引入樣式文件 JS文件 並初始化
<link href="css/impress-demo.css" rel="stylesheet" />
<body class="impress-not-supported">
<div id="impress">
<script src='js/impress.js'></script>
<script>impress().init();</script>
</div>
</body>
PPT的第一頁標題
還是習慣性的發揮聰明才智找到了一個tiny的，就使用它來作為標題，因為不太想修改css樣式文件，就先這樣偷懶一把。
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p><b>給你100塊！<br />你可以幫我寫PPT嗎？</b></p>
</div>
再來添加一些頁面內容
一個標題搭配一些頁面內容就可以稱之為簡易PPT了，如果要酷炫你也可以繼續折騰。添加第一個普通的頁面的代碼如下
<div class="step slide" data-x="-1000" data-y="-1500">+
<q>我是第一個頁面，難免會有些緊張，因為我是第一個出場的帥哥！</q>
</div>
默認的樣式的data-x的差值是1000，所以第二個頁面就是0，依次類推，data-y的值默認不變，因為我們演示的只是一個簡單的左右切換，你也可以整個高大上的旋轉，怎么炫怎么弄。
DOM結構一直不變，於是乎我就想把數據寫成一個數組，直接循環出來。最后我就愉快的寫了好幾個頁面的數據。
var data = [
"我是第二個頁面，話說最近公司的微波爐壞了，那你怎么上微博的呢？",
"我是第三個頁面，谷歌今天訪問不起了，我能用到的方法失效了，請問還有什么好的方法可以使用嗎？",
"我是第最后一個頁面，就不告訴你，就不告訴你。<br />……"
];
大致就到這里了，具體的demo，見下文。操作方式：上下鍵或者Tab鍵
demo地址：http://pushself.com/2014/12/10/impress/demo.html