作者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