找回密码
 立即注册
查看: 2765|回复: 0

Tizen应用导航引导贴脚本代码

[复制链接]
发表于 2015-10-1 19:12:40 | 显示全部楼层 |阅读模式
当我们停留在网站的上方滚动网站导航。 你要记住设置网络特权外部脚本。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1">
  6.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  7.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  8.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  9.   <style>
  10.   .affix {
  11.       top: 0;
  12.       width: 100%;
  13.       -webkit-transition: all .5s ease-in-out;
  14.       transition: all .5s ease-in-out;
  15.   }
  16.   .affix-top {
  17.       position: static;
  18.       top: -35px;
  19.   }
  20.   .affix + .container-fluid {
  21.       padding-top: 70px;
  22.   }
  23.   li{
  24.   width:25%;
  25.   display:inline;        
  26.   float:left;
  27.   }
  28.   li a {
  29. text-align:center;
  30.   }
  31.   p {
  32.   font-size:1.3em;
  33.   }
  34.   #top {
  35.   background-color:darkorange;
  36.   color:white;
  37.   height:100px;
  38.   }
  39.   </style>
  40. </head>
  41. <body>

  42. <div class="container-fluid" id="top">
  43.   <h1>Bootstrap Affix Example on Tizen</h1>
  44. </div>
  45. <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
  46.   <ul class="nav navbar-nav" style="width:100%">
  47.     <li class="active"><a href="#">Home</a></li>
  48.     <li><a href="#">Page 1</a></li>
  49.     <li><a href="#">Page 2</a></li>
  50.     <li><a href="#">Page 3</a></li>
  51.   </ul>
  52. </nav>
  53.         <div class="container-fluid">
  54.                 <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.</p>
  55.         </div>
  56. </body>
  57. </html>
复制代码

欢迎来到泰泽网:http://www.tizennet.com/ 泰泽论坛:http://bbs.tizennet.com/ 好没有内涵哦,快到设置中更改这个无聊的签名吧!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|泰泽应用|泰泽论坛|泰泽网|小黑屋|Archiver|手机版|泰泽邮箱|泰泽网 ( 蜀ICP备13024062号-1 )

GMT+8, 2024-11-24 02:40 , Processed in 0.085458 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表