fullpages模板

时间 2019-11-14

标签 fullpages 模板繁體版

原文原文链接

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8" />
  5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  6 <meta name="renderer" content="webkit" />
  7 <link rel="stylesheet" href="../css/jquery.fullPage.css" />
  8 <link rel="stylesheet" href="../css/public.css" />
  9 <link rel="stylesheet" href="../css/umis-client.css" />
 10 <title>umis-client</title>
 11 </head>
 12 <body>
 13     <div class="topNav">        <!--topNav-->
 14             <div class="topNav_inside">
 15                 <h1>上海互联网科技集团</h1>
 16                 <ul>
 17                     <li class="firstLi"><a class="active" href="#">首页</a></li>
 18                     <li><a href="../pages/UMIS.html">UMIS</a></li>
 19                     <li><a href="../pages/UFFICE.html">UFFICE</a></li>
 20                     <li><a href="#">解决方案</a></li>
 21                     <li><a href="#">案例</a></li>
 22                     <li><a href="#">互软</a></li>
 23                 </ul>
 24             </div>
 25         </div>
 26         
 27     <div id="fullpage">            <!--rollingContainer-->
 28         <div class="section  active " data-anchor="page1">        <!--onePage-->
 29             
 30         </div>
 31         <div class="section " data-anchor="page2">         <!--twoPage-->
 32             
 33         </div>   
 34         <div class="section" data-anchor="page3">         <!--therePage-->
 35             
 36         </div> 
 37         <div class="section section_um" data-anchor="page4">          <!--lastPage-->
 38                 <p class="txt">互软UMIS6.0协同管理系统，为您创造高效协做、沟通顺畅的管理体系与办公环境。获取更多产品资料与解决方案。欢迎<strong>点击</strong>索取。</p>
 39                 <div class="info">
 40                     <h2>获取更多产品资料和解决方案</h2>
 41                     <form action=""  method="">
 42                         <p>
 43                             <label for="name">您的姓名：</label>
 44                             <input type="text" id="name"  name="username" />
 45                         </p>
 46                         <p>
 47                             <label for="tel">手机号码：</label>
 48                             <input type="text" id="tel" name="tel" />
 49                         </p>
 50                         <p>
 51                             <label for="mailbox">电子邮箱：</label>
 52                             <input type="text" id="mailbox"  name="mailbox" />
 53                         </p>
 54                         <p>
 55                             <label for="Company">工做单位:</label>
 56                             <input type="text" id="Company"   name="Company"/>
 57                         </p>
 58                         <p class="btn">
 59                             <input class="sub_btn" type="submit" value="提交" />
 60                             <input class="can_btn" type="button" value="取消" />
 61                         </p>
 62 
 63                     </form>
 64                     <span class="close" title="关闭"></span>
 65                 </div>
 66                 <div class="info2">
 67                     <p>感谢您对互软集团产品的关注与支持，咱们会尽快联系您，谢谢！</p>
 68                     <input type="button" class="sure_btn" value="肯定" />
 69                     <span class="close" title="关闭"></span>
 70                 </div>
 71                 <div class="footer">
 72                     <div class="footer_inside">
 73                         <ul class="footer_t">
 74                             <li class="one">产品</li>
 75                             <li class="two">体验</li>
 76                             <li class="there">活动</li>
 77                             <li class="four">互软</li>
 78                         </ul>
 79                         <div class="footer_b">
 80                             <ol class="footer_b_t">
 81                                 <li>网站地图</li>
 82                                 <li>版权声明</li>
 83                                 <li>法律顾问</li>
 84                                 <li>资料下载</li>
 85                             </ol>
 86                             <ol class="footer_b_b">
 87                                 <li class="one">沪ICP备05025289号</li>
 88                                 <li class="two">Copyright (c) 2000-2017 上海互联网软件集团</li>
 89                                 <li class="there">上海工商</li>
 90                                 <li class="four"></li>
 91                             </ol>
 92                         </div>
 93                     </div>
 94                 </div>
 95             </div>
 96         
 97     </div>
 98     
 99     
100     
101     <script src="../js/jquery-2.1.4.min.js"></script>
102     <script src="../js/jquery.fullPage.min.js"></script>
103     <script type="text/javascript">
104     //初始配置
105     $('#fullpage').fullpage({
106         'verticalCentered': false,
107         'css3': true,
108         'sectionsColor': ['#254875', '#00FF00', '#254587','#f8f2ec'],//每屏默认背景色
109         anchors: ['page1', 'page2', 'page3','page4'],//每屏对应的锚点
110         'navigation': true,
111         'navigationPosition': 'right',
112         'navigationTooltips': ['客户1', '客户2', '客户3','lastPage']
113     });
114         
115     </script>
116 </body>
117 </html>

View Code

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta charset="utf-8" />
  5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />  //
  6 <meta name="renderer" content="webkit" />
  7 <link rel="stylesheet" href="../css/jquery.fullPage.css" />
  8 <link rel="stylesheet" href="../css/public.css" />
  9 <link rel="stylesheet" href="../css/umis-client.css" />
 10 <title>umis-client</title>
 11 </head>
 12 <body>
 13     <div class="topNav">        <!--topNav-->
 14             <div class="topNav_inside">
 15                 <h1>上海互联网科技集团</h1>
 16                 <ul>
 17                     <li class="firstLi"><a class="active" href="#">首页</a></li>
 18                     <li><a href="../pages/UMIS.html">UMIS</a></li>
 19                     <li><a href="../pages/UFFICE.html">UFFICE</a></li>
 20                     <li><a href="#">解决方案</a></li>
 21                     <li><a href="#">案例</a></li>
 22                     <li><a href="#">互软</a></li>
 23                 </ul>
 24             </div>
 25         </div>
 26         
 27     <div id="fullpage">            <!--rollingContainer-->
 28         <div class="section  active " data-anchor="page1">        <!--onePage-->
 29             
 30         </div>
 31         <div class="section " data-anchor="page2">         <!--twoPage-->
 32             
 33         </div>   
 34         <div class="section" data-anchor="page3">         <!--therePage-->
 35             
 36         </div> 
 37         <div class="section section_um" data-anchor="page4">          <!--lastPage-->
 38                 <p class="txt">互软UMIS6.0协同管理系统，为您创造高效协做、沟通顺畅的管理体系与办公环境。获取更多产品资料与解决方案。欢迎<strong>点击</strong>索取。</p>
 39                 <div class="info">
 40                     <h2>获取更多产品资料和解决方案</h2>
 41                     <form action=""  method="">
 42                         <p>
 43                             <label for="name">您的姓名：</label>
 44                             <input type="text" id="name"  name="username" />
 45                         </p>
 46                         <p>
 47                             <label for="tel">手机号码：</label>
 48                             <input type="text" id="tel" name="tel" />
 49                         </p>
 50                         <p>
 51                             <label for="mailbox">电子邮箱：</label>
 52                             <input type="text" id="mailbox"  name="mailbox" />
 53                         </p>
 54                         <p>
 55                             <label for="Company">工做单位:</label>
 56                             <input type="text" id="Company"   name="Company"/>
 57                         </p>
 58                         <p class="btn">
 59                             <input class="sub_btn" type="submit" value="提交" />
 60                             <input class="can_btn" type="button" value="取消" />
 61                         </p>
 62 
 63                     </form>
 64                     <span class="close" title="关闭"></span>
 65                 </div>
 66                 <div class="info2">
 67                     <p>感谢您对互软集团产品的关注与支持，咱们会尽快联系您，谢谢！</p>
 68                     <input type="button" class="sure_btn" value="肯定" />
 69                     <span class="close" title="关闭"></span>
 70                 </div>
 71                 <div class="footer">
 72                     <div class="footer_inside">
 73                         <ul class="footer_t">
 74                             <li class="one">产品</li>
 75                             <li class="two">体验</li>
 76                             <li class="there">活动</li>
 77                             <li class="four">互软</li>
 78                         </ul>
 79                         <div class="footer_b">
 80                             <ol class="footer_b_t">
 81                                 <li>网站地图</li>
 82                                 <li>版权声明</li>
 83                                 <li>法律顾问</li>
 84                                 <li>资料下载</li>
 85                             </ol>
 86                             <ol class="footer_b_b">
 87                                 <li class="one">沪ICP备05025289号</li>
 88                                 <li class="two">Copyright (c) 2000-2017 上海互联网软件集团</li>
 89                                 <li class="there">上海工商</li>
 90                                 <li class="four"></li>
 91                             </ol>
 92                         </div>
 93                     </div>
 94                 </div>
 95             </div>
 96         
 97     </div>
 98     
 99     
100     
101     <script src="../js/jquery-2.1.4.min.js"></script>
102     <script src="../js/jquery.fullPage.min.js"></script>
103     <script type="text/javascript">
104     //初始配置
105     $('#fullpage').fullpage({
106            'verticalCentered': true,//每一页的内容垂直居中
               'css3': true,//是否使用css3 transform来实现效果，若是浏览器不支持css3,则使用JQ替代实现
               'sectionsColor': ['#254875', '#00FF00', '#254587','#f8f2ec'],//1.为每个section设置背景色
               'anchors': ['page1', 'page2', 'page3','page4'],//2.定义锚连接，方便用户快速定位某一页面
               'lockAnchors':true,//默认false,是否锁定锚连接,若是锁定anchors没效果。
               'navigation': true,//是否显示导航
               'navigationPosition': 'right',//导航小圆点的位置
               'paddingTop':'80px',//设置每一个section顶部的padding,由于网站有固定在顶部的菜单
               'navigationTooltips': ['', '', '',''],//导航小圆点的提示信息，按顺序书写
               'showActiveTooltip':true//默认false,页面滚动同时是否自动显示tooltips提示信息
113     });
114         
115     </script>
116 </body>
117 </html>　　　　https://zhidao.baidu.com/question/1243321657798604899