无缝滚动-另类-移动端 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
 6     <title>Title</title>
 7     <style>
 8         *
 9         {
10             margin: 0;
11             padding: 0;
12             list-style: none;
13         }
14         div
15         {
16             width:100%;
17             /*height: ;*/
18         }
19         ul
20         {
21             width:100%;
22             height: 385px;
23             white-space: nowrap;
24         }
25         li
26         {
27             width:40%;
28             height: 385px;
29             display: inline-block;
30             font-size: 0;//消除li之间的间隙
31         }
32         li img
33         {
34             width:100%;
35             height: 100%;
36             display: block;
37         }
38     </style>
39 </head>
40 <body>
41     <div>
42         <ul>
43             <li><img src="images/1.png" alt=""></li>
44             <li><img src="images/1.png" alt=""></li>
45             <li><img src="images/1.png" alt=""></li>
46             <li><img src="images/1.png" alt=""></li>
47             <li><img src="images/1.png" alt=""></li>
48             <li><img src="images/1.png" alt=""></li>
49             <li><img src="images/1.png" alt=""></li>
50             <li><img src="images/1.png" alt=""></li>
51             <li><img src="images/1.png" alt=""></li>
52             <li><img src="images/1.png" alt=""></li>
53             <li><img src="images/1.png" alt=""></li>
54         </ul>
55     </div>
56 </body>
57 </html>
index.html

 

posted @ 2016-10-18 16:46  舍近求猿  阅读(118)  评论(0)    收藏  举报