JqueryMobile初体验

1.标示

caicongyang

2.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-mobile/1.3.2/jquery.mobile.min.css">
<script src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-mobile/1.3.2/jquery.mobile.min.js"></script>
</head>
  <body>
  <div data-role="page">
    <div data-role="header" data-position="fixed" >
    	<a href="#" data-role="button">首页</a>
    	<h1>欢迎来到caicongyang.com</h1>
    	<a href="#" data-role="button" class="ui-btn-right" data-icon="search">搜索</a>
    </div>
    
    <div  data-role="content" >
    	 <ul data-role="listview" data-inset="true">
    	  <li><a href="#"> 
    	 	  <h2>我的Java学习旅程</h2>
    	 	  <p>讲述我的java学习历程,不得不说这是一个漫长而乏味的过程!</p>
    	 	  </a>
    	 	 </li>
    	
    	<li><a href="#">
    		 <h2>我的人生经历</h2>
    	 	 <p>讲述我的成长的故事,那些纯真而美好的童年以及那些青涩的青年!记录这边文章的过程也是我回味过往点点滴滴的历程!</p>
    	</a></li>
    		<li><a href="#">
    		 <h2>我的学习经历</h2>
    	 	 <p>讲述我在学校的那些事,那一张张可爱的笑脸,时而嬉笑、时而生气的我们!</p>
    	</a></li>
    	 </ul>
    	 <div>
    	 <a href="#" data-role="button" data-inline="true">上一页</a>
    	 <a href="#" data-role="button" data-inline="true">下一页</a>
    	 </div>
    </div>	
     <div data-role="footer" data-position="fixed">
     	<h4><a href="http://www.miibeian.gov.cn/" target="_blank">闽ICP备14022016号</a></h4>
     </div>
    </div>
  </body>
</html>


3.效果图

JqueryMobile初体验_第1张图片

4.关于我

caicongyang: http://blog.csdn.net/caicongyang

你可能感兴趣的:(jquerymobile)