用slide做html5的ppt

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/details/70185538

用网上的模板,做的web ppt比较适合那些基于网页的演示,不用切换,只是切换浏览器的标签页,用ctrl+tab就可以切换了,很酷。

<!DOCTYPE html>
<!-- {{template "header"}} -->
<!-- <html manifest="cache.appcache" class=" transition"><head> -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">
    <title>EngineerCMS:工程师知识管理系统</title>
    <link href="/static/css/slidedefault.css" class="theme" rel="stylesheet" media="screen">
    <link href="/static/css/slidecommon.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="/static/font-awesome-4.7.0/css/font-awesome.min.css"/>
  </head>

  <body>
<!--   <div class="navbar navba-default navbar-fixed-top">
    <div class="container-fill">{{template "navbar" .}}</div>
  </div> -->
    <nav id="helpers">
      <button id="nav-first" type="checkbox" class="nav-prev" title="去首页">|<</button>
      <button title="Previous slide" id="nav-prev" class="nav-prev"><</button> 
      <button title="Jump to a random slide" id="slide-no">4</button> 
      <button title="Next slide" id="nav-next" class="nav-next">></button>
      <button id="nav-last" type="checkbox" class="nav-next" title="去尾页">>|</button>
      <menu>
        <button type="checkbox" data-command="share" class="share" title="分享">分享</button>
        <button type="checkbox" data-command="help" title="View Help">?</button>
      </menu>
    </nav>
    <div class="presentation">
      <div id="presentation-counter">4</div>
      <div class="slides" style="display: block;">
        <div class="slide distant-slide" id="landing-slide">
          <style>
            #landing-slide p {
              font-size: 35px;
            }
          </style>
          <section class="middle">
            <p>这是一个使用HTML5制作的幻灯片</p>
            <p>使用 <span id="left-init-key" class="key">→</span> 键开始播放。</p>
          </section>
          <aside class="note">
            <section>
              Welcome! (This field is for presenter notes and commentary.)
            </section>
          </aside> 
        <span class="counter"></span></div>

        <!-- <div class="slide far-past" id="controls-slide">
          <header>控制键</header>
          <style>
            #controls-slide li, #controls-slide p {
              font-size: 32px;
            }
            #controls-slide .key {
              bottom: 2px;
            }
          </style>
          <section>
            <ul>
              <li>使用 <span class="key">←</span> 和 <span class="key">→</span> 进行前后翻页。</li>
              <li>使用 <span class="key">Ctrl/Command</span> 和 <span class="key">+</span> 或 <span class="key">-</span> 进行页面缩放。</li>
              <li>按 <span class="key">3</span> 切换3D效果。</li>
              <li>按 <span class="key">0</span> 显示帮助。</li>
            </ul>
          </section>
        <span class="counter"></span></div> -->

        <!-- <div class="slide past" id="hello">
          <section class="middle">
            <hgroup><img src="images/bumper640x360.png"></hgroup>
          </section>
        <span class="counter"></span></div> -->
        <div class="slide current" id="title-slide">
          <style>
            #title-slide h1, #title-slide h2 {
              color: black;
            }
            #title-slide h1 {
              font-size: 80px;
            }
            #title-slide h2 {
              font-size: 36px;
            }
          </style>
          <section class="middle">
            <hgroup>
              <h1>
                  工程师知识管理系统(EngineerCMS)<br>
                  <!-- 简介<br> -->
                  简介<br>
              </h1>
              <h2>
                <br>504284@qq.com<br><span class="trans"><a href="https://github.com/3xxx">3xxx</a>制作</span><br>
              </h2>
            </hgroup>
          </section>
        <span class="counter"></span></div>

	<!-- start of slide 0 fa-slack fa-yelp fa-houzz fa-ioxhost fa-stop fa-long-arrow-right fa-hand-o-right fa-arrow-right fa-arrow-circle-right  fa-chevron-circle-right fa-caret-square-o-right fa-gear fa-fighter-jet  fa-square fa-square-o fa-star  fa-star-o fa-map-marker  fa-dot-circle-o fa-circle  fa-circle-o fa-cubes fa-bell fa-asterisk-->
        <div class="slide future" id="slide-0">
          <header><i class="fa fa-square"> 视频总揽</i></header>
          <section>
            <p>
            <i class="fa fa-slack"> 第一节 工程师需求</i>
            <br>
            <br>
            <i class="fa fa-slack"> 第二节 新建项目</i>
            <br>
            <br>
            <i class="fa fa-slack"> 第三节 往项目里添加成果</i>
            <br>
            <br>
            <i class="fa fa-slack"> 第四节 添加大事记</i>
            <br>
            <br>
            <i class="fa fa-slack"> 第五节 同步资料</i>
            <br>
            <br>
            <i class="fa fa-slack"> 第六节 用户和权限</i>
            <br>
            <br>
            <i class="fa fa-slack"> 第七节 定制目录和部门</i>
            <br>
            <br>
            <i class="fa fa-slack"> 第八节 后记</i>
            </p>
            <p>
          </p></section>
        <span class="counter"></span></div> <!-- end slide template -->
      <!-- end of slide 0 --><!-- start of slide 1 -->
        <div class="slide far-future" id="slide-1">
          <header><i class="fa fa-slack"> 第一节 工程师需求</i></header>

          <section>
            <p>
            <i class="fa fa-arrow-right"> 工程师个人资料标准化管理</i>
            <br>
            </p>
            <ul>
            <li><i class="fa fa-caret-right">个人增加时间成本——但降低总时间成本</i></li>
            <li><i class="fa fa-caret-right">团队协作方便——不用为别人找资料,发资料</i>/li>
            <li><i class="fa fa-caret-right">资料交接快捷——工作调换方便</i></li>
            </ul>

            <p>
            <i class="fa fa-arrow-right"> 知识共享——知识继承</i>
            <br>
            </p>
            <ul>
            <li><i class="fa fa-caret-right">持久化展示自己的知识总结——拓宽团队视野,避免重复造轮子</i></li>
            
            <li><i class="fa fa-caret-right">展示工程现场图片——展示其他业绩</i></li>
            <li><i class="fa fa-caret-right">参建各方远程查询工程资料——设计资料易得是保证工程质量的必备条件</i></li>
            </ul>

            <p>
            <i class="fa fa-arrow-right"> 网络化的必然趋势——基于个人电脑的微服务</i>
            <br>
            </p>
            <p>
          </p></section>
        <span class="counter"></span></div> <!-- end slide template -->
      <!-- end of slide 1 --><!-- start of slide 2 -->
        <div class="slide distant-slide" id="slide-2">
          <header><i class="fa fa-slack"> 第一节 工程师需求</i></header>

          <section>
            <p>
            <i class="fa fa-arrow-right"> 项目页面</i>
            <br>
            </p>
            <ul>
            <li><i class="fa fa-caret-right">项目列表</i></li>
            <li><i class="fa fa-caret-right">项目成果</i></li>
            </ul>
            <br>
            
            <p>
            <i class="fa fa-arrow-right"> 单位页面</i>
            <br>
            </p>
            <ul>
            <li><i class="fa fa-caret-right">组织结构——个人链接</i></li>
            <li><i class="fa fa-caret-right">展示图片</i></li>
            <li><i class="fa fa-caret-right">资源检索</i></li>
            </ul>
            <br>

            <p>
            <i class="fa fa-arrow-right"> 后台</i>
            <br>
            </p>
            <ul>
            <li><i class="fa fa-caret-right">目录结构设置</i></li>
            <li><i class="fa fa-caret-right">用户、IP和权限</i></li>
            <li><i class="fa fa-caret-right">项目目录编辑</i></li>
            <li><i class="fa fa-caret-right">项目同步设置</i></li>
            </ul>
            <br>

            <p>
          </p></section>
        <span class="counter"></span></div> <!-- end slide template -->

      </div>

      <div id="speaker-note" class="invisible" style="display: none;"></div> <!-- speaker note -->
      <aside id="help" class="sidebar invisible" style="display: hidden;">
        <table>
          <caption>帮助</caption>
          <tbody>
            <tr>
              <th>翻页</th>
              <td>← →</td>
            </tr>
            <tr>
              <th>源文件</th>
              <td>s</td>
            </tr>
            <tr>
              <th>3D切换</th>
              <td>3</td>
            </tr>
            <tr>
              <th>帮助</th>
              <td>0</td>
            </tr>
          </tbody>
        </table>
      </aside>

    </div> <!-- presentation -->

    <!--[if lt IE 9]>
    <script 
      src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
    </script>
    <script>CFInstall.check({ mode: "overlay" });</script>
    <![endif]-->

    <script src="/static/js/slideutils.js"></script>
  

</body></html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏wblearn

我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

最近一直在做项目,感觉没什么分享的所以一直没写。 今天不上班,就把最近做的一个demo做个简单的总结。

961
来自专栏拂晓风起

关于前后端同构,我的一点思路和心得(vue、nodejs、react、模版)

3174
来自专栏携程技术中心

干货 | IMVC(同构 MVC)的前端实践

作者简介 古映杰,携程度假研发部前端和 node.js 架构负责人。开源库 react-lite 作者。本文来自古映杰在“携程技术沙龙——新一代前端技术实践”上...

5175
来自专栏小文博客

“息屏提醒”你的小米手机用上了吗

1822
来自专栏葡萄城控件技术团队

用FlexGrid做开发,轻松处理百万级表格数据

表格数据处理是我们项目开发中经常会遇到的设计需求之一,所需处理的数据量也较大,通常是万级、甚至百万级。此时,完全依赖平台自带的表格工具,往往无法加载如此大的数据...

2228
来自专栏不止是前端

实用主义:前端IDE选择从入门到高阶

42412
来自专栏何俊林

Android 8.0正式发布 "奥利奥"新功能惊人

尽管 Android 刷版本号的步伐年年加快,但每年带给用户的惊喜从未减少。经历了四个开发者预览版的洗礼后,Android 8.0 终于在今天凌晨迎来了正式版发...

2358
来自专栏安恒网络空间安全讲武堂

0CTF h4x0rs.club1/2 复现

周末肛了一下0ctf,发现自己依旧那么菜。一道题也没解出来,成功的再一次拖了队伍后退。 今天发现国外大佬们已经开始放wp了。于是自己学习一波,复现一下。 先吐槽...

3987
来自专栏CSDN技术头条

IMVC(同构 MVC)的前端实践

导语 随着 Backbone 等老牌框架的逐渐衰退,前端 MVC 发展缓慢,有逐渐被 MVVM/Flux 所取代的趋势。 然而,纵观近几年的发展,可以发现一点,...

2306
来自专栏BestSDK

手机APP切图命名规范大总结

关于切图命名的规范,我个人觉得关键是在于团队能够有一个统一的规则,所有成员严格遵守并且和所有开发全盘拉通,不然一切都是空谈。 不同的团队使用的软件都不一样,如果...

3224

扫码关注云+社区

领取腾讯云代金券