Reveal.js Let programmers do ppt also enjoy happiness

Objective

In addition to writing a beautiful code, the programmer also requires a style of elegant ppt, such as reporting to the leadership, to the team members feedback project progress of their own work and so on. As far as I am concerned, do PPT also want to look for template, also need design style, heart is anxious. So, I found such a JS library, with code to complete the PPT, during the training thesis of the reply PPT Use this program, has been the leadership of colleagues alike. This article simply about the basics of reveal.js, I used less than two hours to make a ppt, from scratch, personally feel very simple.

Body

Reveal.js is a framework specifically designed to make HTML presentations. Just introduce theme-style files (including bootstrap.min.css, if you want to use bootstrap style) and JS files in index.html. As shown below

<link rel= "stylesheet" href= "Css/reveal.css"/>    <link rel= "stylesheet" href= "Css/theme/white.css"/>    <link rel= "stylesheet" href= "Css/bootstrap.min.css"/>    <script src= "Js/reveal.js" ></script >

View Code

The subject part of Reveal.js is the HTML code embedded in the body, such as

All PPT parts are required to be written in a double div, and the outer div class is reveal, and the inner div class is slides. Each PPT is a section, that is, <section></section>. The section of the sibling node is toggled by the arrows in the left and right direction while the section can also be embedded in the PPT presentation. For example, we do a PPT divided into three chapters, assuming that the first section has 1.1,1.2,1.3 three bars, then three chapters are sibling node relationship, 1.1,1.2,1.3 is a sibling node relationship, and these three subsections are embedded in the first section of the sections inside.

Also, we can easily write each PPT header and footer, the header (or footer) of the content is not written in section, its parent node is <div class= "slides" ></div>, as for the header or footer, You can control the positioning via CSS.

Reveal.js also defines its own set of default rules, as shown in

    <script>        reveal.initialize ({            true,            true,            ' C /t '        })    ; </script>

View Code

Through Reveal.initialize ({}), settings such as progress bar, page number, AutoPlay control, etc. Although Reveal.js is played through a browser, it also provides features such as printing and PDF conversion. This article only speaks about the most basic usage of reveal.js.

Reveal.js Let programmers do ppt also enjoy happiness