jQuery Mobile仿360首頁，jQuery Mobile網格佈局,jQuery Mobile網址大全,HTML5仿360首頁

業餘草發表於2014-07-03
jQueryHTML
隨著移動網際網路的興起，越來越多的人使用手機上網。開啟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，共同學習！

原始碼已共享到QQ群：135430763

歡迎大家關注我的個人部落格！！






相關文章