作者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/cn.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