作者hijkxyzuw (i,j,k) ×(x,y,z) 看板: Web_Design标题: [讨论] 用HTML写投影片的几个方法
时间: Fri Jan 8 12:28:30 2016
我是HTML的新手，写CSS一段时间了；JavaScript还很不熟。
最近要做几个简报需要用到投影片，想用HTML写写看。
诉求是方法简单、HTML干静。
# 分隔线 #
这是我第一种想到的方法。
我平常都用Markdown来写HTML.
以Markdown的观点，当然是要从纯文字上看来就是一份投影片。
所以我就是把各页面只单纯用分隔线 `<hr />` 分开。
## 浮动 ##
用 margin 来撑开分隔线：
<style>
body > * {
float: left;
clear: both;
}
hr {
float: none;
margin-top: 100%;
}
</style>
因为分隔线间的元素都浮动了，就等于没有内容，就会“蹋陷”。
只靠分隔线本身的 `margin` 撑高度，也就会是100%, 一个浏览器的高度。
但不知道为什么，`margin-top: 100%;` 会太大，`margin-top: 50%`反而刚好。
缺点是内容全部浮动了，如果要加其它东西会有点麻烦。
有时会有意想不到的情况。
## 伪元素 ##
用 `hr::after` 来把分隔线撑开。
<style>
hr::after {
display: block;
height: 100%;
width: 1px;
float: left;
clear: both;
}
hr {
clear: both;
}
</style>
原理是在分隔线前或后制造一个高度 100% 的伪元素，让它浮动左或右。
然后分隔线清除浮动，使分隔线之间高度至少有 100% .
缺点是我发现“空元素”是不能有伪元素的……；根据 _W3C_ 的说法。
所以像 `<img>` 也不能有伪元素。所以我放弃这个作法。
（本来我是先想到这个方法的，但那时我好像误会一些事。
像伪元素是在元素内，而非在元素外。）
但 Firefox里的空元素好像可以有伪元素，应该算 bug 吧。
# 容器 #
把每个页面用一个容器包起来，然后把容器的高度设为 100% .
<style>
section {
height: 100%;
display: block;
}
body, html {
height: 100%;
}
</style>
优点就是很多人都这样做，自订性高。
缺点也有不少；例如要写这样的话，
我的作法是把 <hr /> 取代为 </section><section>.
但还蛮烦的……。
另外要让容器高 100% , 是一件不简单的事。
宽 100% 很简单，因为 % 的意义是父容器的长度。
（width, height 的 % 和 font-size 的 % 不同。）
而父容器的宽度一般都是一个页面高；但一般高度是……，自动。
（`height: auto; `）也就是依据里面有多少元素，再算多高。
若设了body, html 高 100% , 就是高整个页面。
而body 内的 section 也100% 就会变成每个 section 都高整个body.
这样会超出body, 一般来说不构成问题，因为会自动生出“卷动条”。
问题会发生于你设了：
<style>
body, html, #slide {
height: 100%;
}
section {
height: 100%;
}
</style>
<html>
<body>
<div id="slide">
<section> ~ </section>
<section> ~ </section>
</div>
<div id="report">
~~~
</div>
</body>
</html>
那 #report 的内容就会和 #slide 中的 section 内容重叠。
因为 #report 是接在 #slide 之后，但 #slide 的高度只有 100%.
我有找到一个用 JS 写的投影片,
你只要负责在 HTML 中的 section 中填入投影片内容。
就会生成很帅的投影片。
萤幕里还可以有方向键。
Reveal JS
https://github.com/hakimel/reveal.js