jqm-list 

 1 <html>
 2     <head><title>canvas test 1</title>
 3        <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 -->
 4     <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
 5     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
 6     <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
 7     <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
 8     <style type="text/css">
 9     .list_icon{
10         vertical-align: 50%;
11         min-height: 80px;
12         min-width: 80px;
13     }  
14     .ui-li-heading{
15         margin:0px;
16     }
17     p{
18     padding-top:10px;
19     color:red;
20     }
21     </style>
22     </head>
23     <body>
24     
25 <div data-role="page">
26 
27   <div data-role="header" data-position="fixed">
28     <h1>我的应用</h1>
29     <a href="index.html" data-role="button" data-icon="arrow-l" data-iconpos="notext">Delete</a>
30   </div>
31 
32   <div data-role="content" >
33     <ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="时间，地点">
34       <li>
35       <a href="#">
36             <img src="./img/floder_icon.png" class="list_icon" >
37             
38             <h2>Google Chrome</h2>
39             <p><span style="vertical-align: 50%;">评价等级：</span>
40                 <img src="./img/star.png">
41             </p>
42             </a>
43       </li>
44       
45       
46         <li>
47       <a href="#">
48             <img src="./img/floder_icon.png"  class="list_icon" >
49             
50             <h2>Google Chrome</h2>
51             <p><span style="vertical-align: 50%;">评价等级：</span>
52                 <img src="./img/star.png">
53             </p>
54             </a>
55       </li>
56       
57       <li>
58        <a href="#">
59             <img src="./img/floder_icon.png"   class="list_icon" >
60             
61             <h2>Google Chrome</h2>
62             <p><span style="vertical-align: 50%;">评价等级：</span>
63                 <img src="./img/star.png">
64             </p>
65             </a>
66       </li>
67       <li>
68         <a href="#">
69             <img src="./img/floder_icon.png"   class="list_icon" >
70             
71             <h2>Google Chrome</h2>
72             <p><span style="vertical-align: 50%;">评价等级：</span>
73                 <img src="./img/star.png">
74             </p>
75             </a>
76       </li>
77     </ul>
78   
79   </div>
80   
81 
82   
83 </div>
84 
85 
86 
87 </body>
88 </html>
View Code

 

posted @ 2014-04-10 13:05  q429786006  阅读(214)  评论(0)    收藏  举报