JqueryMobile初体验

来源：互联网发布：萨迪克哈佐维克数据编辑：程序博客网时间：2024/06/05 11:26

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.效果图

4.关于我

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

1 0