作者hijkxyzuw (i,j,k) ×(x,y,z)
看板Web_Design
標題[討論] 用HTML寫投影片的幾個方法
時間Fri Jan 8 12:28:30 2016
作者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
--
最後，共產黨人到處都努力爭取全世界的民主政黨之間的團結和協調。
共產黨人不屑于隱瞞自己的觀點和意圖。他們公開宣布：他們的目的只有用暴力推翻全部現存的社會制度才能達到。讓統治階級在共產主義革命面前發抖吧。無產者在這個革命中失去的只是鎖鏈。他們獲得的將是整個世界。
全世界無產者，聯合起來！
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.116.102.66
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1452227314.A.0B8.html
1F：推 crossdunk: 痾 是不是沒打完@@ 01/08 12:35
2F：推 s89227: 我和同學用網頁做投影片是用section，給你參考 01/08 12:49
※ 編輯: hijkxyzuw (140.116.243.66), 01/08/2016 13:14:03
※ 編輯: hijkxyzuw (140.116.243.66), 01/08/2016 13:57:00
4F：→ iamnodoubt: 去找jquery的plugin,有好幾種我記得 01/08 13:51
5F：→ hijkxyzuw: 感謝，打完了……。 01/08 14:01
6F：推 JohnYaEPen: section+1 01/16 22:51
8F：→ a110482: 100vh? 01/20 01:09