隨著(zhù)移動(dòng)互聯(lián)網(wǎng)的興起，越來(lái)越多的人使用手機上網(wǎng)。打開(kāi)uc瀏覽器，我們可以看到uc的主頁(yè)?；蛘?60的主頁(yè)，或者百度的主頁(yè)。
這些頁(yè)面都是html5做的?？雌饋?lái)很難，其實(shí)一點(diǎn)也不難。網(wǎng)上有很多介紹html5的文章，我這里就不解釋了。對于程序員來(lái)說(shuō)，看代碼還是最實(shí)在的。
代碼支持電腦和手機,pad等終端設備。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>jQuery Mobile頁(yè)面跳轉切換的幾種方式</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> 濤哥偽專(zhuān)家管理系統 </h1> </div><span style="white-space:pre"> </span><!-- 如有不懂，請加qq群：135430763，共同學(xué)習！ --> <div data-role="content"> <div class="menu"> <ul> <li class="green"><a href="http://www.xttblog.com"> <img src="img/about.png" alt="網(wǎng)址導航" title="網(wǎng)址導航" /><span>網(wǎng)址導航</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="小說(shuō)書(shū)架" title="小說(shuō)書(shū)架" /><span>小說(shuō)書(shū)架</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="新浪讀書(shū)" title="新浪讀書(shū)" /><span>新浪讀書(shū)</span></a></li> <li class="yellow"><a href="http://www.xttblog.com"> <img src="img/clients.png" alt="熱門(mén)游戲" title="" /><span>熱門(mén)游戲</span></a></li> <li class="yellow"><a href="http://www.xttblog.com"> <img src="img/clients.png" alt="有緣網(wǎng)" title="有緣網(wǎng)" /><span>有緣網(wǎng)</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="小說(shuō)書(shū)架" title="小說(shuō)書(shū)架" /><span>小說(shuō)書(shū)架</span></a></li> <li class="green"><a href="http://www.xttblog.com"> <img src="img/about.png" alt="網(wǎng)址導航" title="網(wǎng)址導航" /><span>網(wǎng)址導航</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> 濤哥偽專(zhuān)家管理系統 </h1> </div> </div><pre name="code" class="html"><span style="white-space:pre"> </span><!-- 如有不懂，請加qq群：135430763，共同學(xué)習！ -->
<script type="text/javascript"></script>
<span style="white-space:pre"> </span><!-- 如有不懂，請加qq群：135430763，共同學(xué)習！ --></body></html>
手機上運行效果：
如有不懂，請加qq群：135430763，共同學(xué)習！
歡迎大家關(guān)注我的個(gè)人博客??！
聯(lián)系客服
