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>
