Disp BBS guest 註冊 登入(i) 線上人數: 620
首頁(home) 上頁(↑) 下頁(↓) 末頁(end)
※ 本文為 zbali.bbs. 轉寄自 ptt.cc 更新時間: 2016-01-18 14:34:21
看板 Web_Design
作者 hijkxyzuw (i,j,k) × (x,y,z)
標題 [討論] 用HTML寫投影片的幾個方法
時間 Fri Jan  8 12:28:30 2016
看板 Web_Design
作者 hijkxyzuw (i,j,k) × (x,y,z)
標題 [討論] 用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
hakimel/reveal.js ·  GitHub
[圖]
reveal.js - The HTML Presentation Framework ...

 


--

最後，共產黨人到處都努力爭取全世界的民主政黨之間的團結和協調。

共產黨人不屑于隱瞞自己的觀點和意圖。他們公開宣布：他們的目的只有用暴力推翻全部現存的社會制度才能達到。讓統治階級在共產主義革命面前發抖吧。無產者在這個革命中失去的只是鎖鏈。他們獲得的將是整個世界。

全世界無產者，聯合起來！

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 140.116.102.66
※ 文章代碼(AID): #1MZpho2u (Web_Design)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1452227314.A.0B8.html
推 crossdunk: 痾  是不是沒打完@@1F 01/08 12:35
推 s89227: 我和同學用網頁做投影片是用section，給你參考2F 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
推 iamnodoubt: http://lab.hakim.se/reveal-js3F 01/08 13:51
→ iamnodoubt: 去找jquery的plugin,有好幾種我記得
→ hijkxyzuw: 感謝，打完了……。5F 01/08 14:01
推 JohnYaEPen: section+16F 01/16 22:51
推 st9140626: 可以考慮用線上工具，https://slides.com/7F 01/17 14:56
Slides – Create and share presentations online
[圖]
Slides is a place for creating, presenting and sharing presentations. The Slides editor is available right in your browser. Unlike traditional presentation software, like PowerPoint, there's no need to download anything. ...

 

--
※ 看板: ott　文章推薦值: 0 目前人氣: 0 累積人氣: 248　
分享網址: 複製 已複製
→
guest
x)推文 r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇