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
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程