你需要一款简单易用的幻灯片演示制作工具，比如Focusky，这个软件支持输出多种格式，包括HTML/*.EXE/*.ZIP/*.APP/视频/PDF/H5等，应用很方便。
如何利用Focusky制作简易的HTML5幻灯片？有2种方式，一种是自定义创建幻灯片内容，一种是直接套用模板编辑制作，简单易上手，推荐使用。打开软件，登录账号，选择合适的幻灯片模板进行套用，替换模板原有内容，设置动画特效，就可以输出HTML5幻灯片。
另外，Focusky在演示上还支持3D幻灯片演示特效，可以打破传统的PPT切换方式，只需加入生动酷炫的3D镜头缩放、旋转和平移特效就可以使幻灯片像3D电影般播放，给人以视觉冲击感。
前段时间在网上看到了一个老外写的一个HTML5响应式表格效果，它的CSS代码用SASS写的，有许多重复的data属性。我们这里改进一下他的代码，解决一下他写的不好的地方。要看到本例的响应式表格效果，浏览器要缩放到小于600像素的大小。HTML结构如下：<tableid="miyazaki">
<caption>The Films of Miyazaki</caption>
<thead>
<tr><th>Film<th>Year<th>Honor
<tbody>
<tr>
<tddata-th="Film">My Neighbor Totoro
<tddata-th="Year">1988
<tddata-th="Honor">Blue Ribbon Award (Special)
<tr>
<tddata-th="Film">Princess Mononoke
<tddata-th="Year">1997
<tddata-th="Honor">Nebula Award (Best Script)
<tr>
<tddata-th="Film">Spirited Away
<tddata-th="Year">2001
<tddata-th="Honor">Academy Award (Best Animated Feature)
<tr>
<tddata-th="Film">Howl’s Moving Castle
<tddata-th="Year">2004
<tddata-th="Honor">Hollywood Film Festival (Animation OTY)
</table>
注意代码中的data属性，每一个单元格的data属性都与表格的header相对应。
CSS样式
表格基本的CSS样式如下：
table#miyazakicaption{
font-size:2remcolor:#444
margin:1rem
background-image:url(miyazaki.png),url(miyazaki2.png)
background-size: contain
background-repeat:no-repeat
background-position:centerleft,centerright
}
table#miyazaki {
border-collapse:collapse
font-family: Agenda-Lightfont-weight:100
background:#333color:#fff
text-rendering:optimizeLegibility
border-radius:5px
}
table#miyazaki thead th {font-weight:600}
table#miyazaki thead th, table#miyazaki tbody td {
padding: .8remfont-size:1.4rem
}
table#miyazaki tbody td {
padding: .8remfont-size:1.4rem
color:#444background:#eee
}
table#miyazaki tbody tr:not(:last-child) {
border-top:1pxsolid#ddd
border-bottom:1pxsolid#ddd
}
下面是响应式表格的CSS代码：
@mediascreenand (max-width:600px) {
table#miyazakicaption{background-image:none}
table#miyazaki thead {display:none}
table#miyazaki tbody td {display:blockpadding: .6rem}
table#miyazaki tbody tr td:first-child {background:#333color:#fff}
table#miyazaki tbody td:before {
content:attr(data-th)font-weight:bold
display:inline-blockwidth:6rem
}
}
media query代码中隐藏表格的头部单元，并且将每一个单元格的data-th作为标签显示在单元格内容的前面。每一行的第一个单元格都设置了特别的背景色和前景色，使之更为清晰。
