[討論] 用HTML寫投影片的幾個方法

看板Web_Design作者hijkxyzuw時間9年前 (2016/01/08 12:28)推噓5(5推 0噓 3→)

留言8則, 7人參與討論串1/1

標題: [討論] 用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://www.ptt.cc/bbs/Web_Design/M.1452227314.A.0B8.html