未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页

2014.09.01

关注

jQuery Mobile仿360首页,jQuery Mobile网格布局,jQuery Mobile网址大全,HTML5仿360首页

随着移动互联网的兴起,越来越多的人使用手机上网。打开uc浏览器,我们可以看到uc的主页。或者360的主页,或者百度的主页。

这些页面都是html5做的。看起来很难,其实一点也不难。网上有很多介绍html5的文章,我这里就不解释了。对于程序员来说,看代码还是最实在的。

代码支持电脑和手机,pad等终端设备。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>jQuery Mobile页面跳转切换的几种方式</title>      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <meta name="viewport" content="width=device-width"/>    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>  <!--<link rel="stylesheet" type="text/css" href="../jQuery/jquery.mobile-1.3.2.min.css">  --><style type="text/css">    .menu{ width:100%; padding:0px; margin:0px 0 50px 0;margin-top:-2.1%;}    .menu ul{ list-style:none; padding:0px; margin:0px; width:100%;}    .menu ul li{ list-style:none; margin:3% 0 0 3%; padding:5.5% 0;padding-bottom:0px; width:29.333333%;height:auto; float:left; display:block; text-align:center;}    .menu ul li a{ color:#FFFFFF; text-decoration:none;  text-align: center;}     .menu ul li a span{ display:block; text-align:center; font-size:14px; line-height:25px;}    .menu ul li img{ display:inline-block;max-width:50%;}    .green{ background-color:#85af5d;}    .blue{ background-color:#29aae3;}    .darkblue{ background-color:#035792;}    .red{ background-color:#c53238;}    .purple{ background-color:#8b2767;}    .pink{ background-color:#f87c68;}    .orange{ background-color:#f17225;}    .black{ background-color:#272625;}    .gray{ background-color:#6e6e6e;}    .yellow{ background-color:#ffb606;}    .bluegreen{ background-color:#06a78b;}    .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }     .clearfix { display: inline-block; }     .clearfix { display: block; }     .none { display: none; }     span{color:#ffffff;}  </style>  <!--<script type="text/javascript" src="../jQuery/jquery-1.8.3.min.js"></script>  <script type="text/javascript" src="../jQuery/jquery.mobile-1.3.2.min.js"></script>-->  	<script type="text/javascript">  	</script>  </head>    <body>    <div data-role="page" id="fivePage" data-theme="b" >    <div data-role="header" data-position="fixed" data-theme="b">      <h1>        涛哥伪专家管理系统      </h1>    </div><span style="white-space:pre">		</span><!-- 如有不懂,请加qq群:135430763,共同学习! -->    <div data-role="content">      <div class="menu">        <ul>                  <li class="green"><a href="http://www.xttblog.com">                      <img src="img/about.png" alt="网址导航" title="网址导航" /><span>网址导航</span></a></li>                  <li class="red"><a href="http://www.xttblog.com">                      <img src="img/tools.png" alt="天天热帖" title="天天热帖" /><span>天天热帖</span></a></li>                  <li class="blue"><a href="http://www.xttblog.com">                      <img src="img/blog.png" alt="影视大全" title="影视大全" /><span>影视大全</span></a></li>                  <li class="orange"><a href="http://www.xttblog.com">                      <img src="img/docs.png" alt="携程旅行" title="携程旅行" /><span>携程旅行</span></a></li>                  <li class="purple"><a href="http://www.xttblog.com">                      <img src="img/photos.png" alt="小说书架" title="小说书架" /><span>小说书架</span></a></li>                  <li class="yellow"><a href="http://www.xttblog.com">                      <img src="img/clients.png" alt="美团团购" title="美团团购" /><span>美团团购</span></a></li>                  <li class="purple"><a href="http://www.xttblog.com">                      <img src="img/photos.png" alt="新浪读书" title="新浪读书" /><span>新浪读书</span></a></li>                  <li class="yellow"><a href="http://www.xttblog.com">                      <img src="img/clients.png" alt="热门游戏" title="" /><span>热门游戏</span></a></li>                  <li class="yellow"><a href="http://www.xttblog.com">                      <img src="img/clients.png" alt="有缘网" title="有缘网" /><span>有缘网</span></a></li>                  <li class="yellow"><a href="http://www.guusoft.com">                      <img src="img/clients.png" alt="谷软" title="谷软" /><span>谷软</span></a></li>                  <li class="orange"><a href="http://www.damuban.com">                      <img src="img/docs.png" alt="大模板" title="大模板" /><span>大模板</span></a></li>                  <li class="purple"><a href="http://www.xttblog.com">                      <img src="img/photos.png" alt="小说书架" title="小说书架" /><span>小说书架</span></a></li>                  <li class="green"><a href="http://www.xttblog.com">                      <img src="img/about.png" alt="网址导航" title="网址导航" /><span>网址导航</span></a></li>                  <li class="red"><a href="http://www.xttblog.com">                      <img src="img/tools.png" alt="天天热帖" title="天天热帖" /><span>天天热帖</span></a></li>                  <li class="blue"><a href="http://www.xttblog.com">                      <img src="img/blog.png" alt="影视大全" title="影视大全" /><span>影视大全</span></a></li>              </ul>              <div class="clearfix"></div>      	</div>    </div>        <div id="footer" data-role="footer" data-theme="b" data-position="fixed">      <h1>        涛哥伪专家管理系统      </h1>    </div>  </div><pre name="code" class="html"><span style="white-space:pre">	</span><!-- 如有不懂,请加qq群:135430763,共同学习! -->

<script type="text/javascript"></script>

<span style="white-space:pre">	</span><!-- 如有不懂,请加qq群:135430763,共同学习! -->
</body></html>

手机上运行效果:

如有不懂,请加qq群:135430763,共同学习!

欢迎大家关注我的个人博客!!

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP阅读全文并永久保存 更多类似文章
猜你喜欢
类似文章
Jquery教你写一个简单的轮播.
Create Featured Content Slider Using jQuery UI
jQuery游戏网站手风琴切换代码
基于JQuery的机电设备管理系统
CSS完成神奇创意的相框
小财神赎回页freemarker应用
更多类似文章 >>
生活服务
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!