jqm-list
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>