专栏首页hotqin888的专栏用slide做html5的ppt

用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 条评论
登录 后参与评论

相关文章

  • EngineerCMS核心代码

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

    hotqin888
  • 电子规范管理系统(2)

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

    hotqin888
  • ONLYOFFICE历史版本开发技术之四

    继昨天打包好onlyoffice5.3.4版本后,本想将engineercms的历史版本功能完善,也就是将历史版本的word和changes都从document...

    hotqin888
  • AdminLTE实现局部刷新

    AdminLTE是一个基于boostrap的前端模板,里面集成了好多插件,可以说方便又臃肿,毕竟不是所有插件都用得到,。好不容易找到个喜欢的前端模板,无奈每次点...

    汐楓
  • Exchange 2010 UM角色安装后无法启动服务,错误 1000,1001

    错误应用程序名称: UMworkerprocess.exe,版本: 14.2.247.1,时间戳: 0x4ea33a96 错误模块名称: Microsoft...

    李珣
  • Facebook 创建 AI 学院,号召全体学 AI

    对于 Facebook,AI 技术是提升用户体验、创造新体验的一大法门。该公司表示,每天处理数十亿的发帖、评论和照片,需要开发出“地球上最高效”的 AI 系统。...

    AI研习社
  • 6.简单sql注入之3

        没有报错,也有显示Hello!于是判断出,该题目没有过滤,只能用基于Hello!回显的sql注入

    py3study
  • 六一儿童节|嗯,以你的身高还真能要到儿童节礼物哦~

    VRPinea
  • MyBatis框架及原理分析

    MyBatis 是支持定制化 SQL、存储过程以及高级映射的优秀的持久层框架,其主要就完成2件事情:

    好好学java
  • Python-数据解析-lxml库-下

    ElementTree 类中附带了一个类似于 XPath 路径语言的 ElementPath 类。

    小团子

扫码关注云+社区

领取腾讯云代金券