当前位置: 首页 > Web前端 > CSS

如何用网页播放幻灯片-RevealJS

时间:2023-03-31 12:25:25 CSS

一句话,看官方API。(过程之前,我用RevealJS修改了我的github网页,一开始我知道RevealJS是老师上课用的,觉得很酷,就搜了他的源码(按F12)。具体操作,看官方的API,这里我教大家如何导入,再举个简单的例子。CSS首先需要导入css文件,reset.css是用来保证不同浏览器下的显示效果的想要的效果,其实就是把margin,padding,border设置为0,顺便也定义了HTML5新增的标签,reveal.css是reveal的基础css,必须导入。/xx.css是主题CSS,你可以自己复制一个改,或者直接改官方的一个SCSS再转成CSS,就成了你自己的主题~JavaScript必须先导入reveal.js然后在你自己的脚本中初始化reveal。可选参数请看官方APIReveal.initialize({xx:xxx,});最外层的HTML是一个div.reveal,然后是div.slides,里面的section标签是您要显示的每个页面。

幻灯片1
幻灯片2
幻灯片3
Slide4
水平幻灯片只有一个section标签,垂直幻灯片在section标签内包含一个section标签。建议在首页使用h1标签,其他页面的标题使用h2标签。Tail每天写博客太费时间了~不过还是有一些进步的~看看我的DEMO(可能过段时间换成别的吧~)初始化搜索关键词选项