移动端列表页布局

效果图如下：

 1  <header>
 2         <h1><span class="backbtn" onclick="javascript:history.go(-1);"></span>视频列表</h1>
 3         <a href="login.html" class="myperson"></a>
 4     </header>
 5     <div class="list-wrap">
 6         <section>
 7             <a href="video.html">
 8                 <div class="banner-video">
 9                     <span>
10                         <img src="images/btn.png" alt="播放按钮" />
11                     </span>
12                     <img src="images/2.jpg" class="img-responsive"/>
13                 </div>
14                 <div class="intro-video">
15                     <h1>堂在线是知名的中文MOOC平台.1000多万大学生选 择在学堂在线观看课程视频.免费提供来自北大, 斯坦福, 麻省理工等知名高校12大学科门类1000余门课程的在线学习.</h1>
16                     <time>2017年12月5日</time>
17                 </div>
18             </a>
19         </section>
20         <section>
21             <a href="video.html">
22                 <div class="banner-video">
23                     <span>
24                         <img src="images/btn.png" alt="播放按钮" />
25                     </span>
26                     <img src="images/2.jpg" class="img-responsive"/>
27                 </div>
28                 <div class="intro-video">
29                     <h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1>
30                     <time>2017年12月5日</time>
31                 </div>
32             </a>
33         </section>
34         <section>
35                 <a href="video.html">
36                     <div class="banner-video">
37                         <span>
38                             <img src="images/btn.png" alt="播放按钮" />
39                         </span>
40                         <img src="images/3.jpg" class="img-responsive"/>
41                     </div>
42                     <div class="intro-video">
43                         <h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1>
44                         <time>2017年12月5日</time>
45                     </div>
46                 </a>
47             </section>
48             <section>
49                     <a href="video.html">
50                         <div class="banner-video">
51                             <span>
52                                 <img src="images/btn.png" alt="播放按钮" />
53                             </span>
54                             <img src="images/2.jpg" class="img-responsive"/>
55                         </div>
56                         <div class="intro-video">
57                             <h1>儿童绘画水彩素描基础班中国插画师的摇篮。</h1>
58                             <time>2017年12月5日</time>
59                         </div>
60                     </a>
61                 </section>
62
63     </div>

  1 /* 移动端样式重置 ========================================= */
  2 @charset "utf-8";
  3 * {
  4     margin: 0;
  5     padding: 0;
  6   }
  7   article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  8     display: block;
  9   }
 10   html {
 11     font-size: 12px;
 12     color: #666;
 13     font-family: ‘Microsoft Yahei‘  ‘Helvetica Neue‘, Helvetica, STHeiTi, Arial, sans-serif;
 14   }
 15   body{
 16   height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch;
 17   }
 18   audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
 19   img {
 20     border: none;
 21     vertical-align: middle;
 22   }
 23   a {
 24     text-decoration: none;
 25     outline: none;
 26   /*设置的tap  A标签的时候出现的黑色高亮*/
 27   -webkit-tap-highlight-color: transparent;
 28   }
 29   a:active { outline: 0; }
 30   .clearfix {
 31     zoom: 1;
 32   }
 33   .clearfix:before,
 34   .clearfix:after {
 35     content: ‘‘;
 36     display: table;
 37   }
 38   .clearfix:after {
 39     clear: both;
 40   }
 41   em {
 42     font-style: normal;
 43   }
 44   input {
 45     outline: none;
 46   }
 47   input[type="text"],
 48   input[type="tel"] {
 49     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 50   }
 51   /* 去除iphone ipad 设备默认按钮样式 */
 52   input[type="button"], input[type="submit"], input[type="reset"] {
 53     -webkit-appearance: none;
 54     border-radius: 0;
 55   }
 56   input::-webkit-outer-spin-button,
 57   input::-webkit-inner-spin-button {
 58       -webkit-appearance: none !important;
 59       margin: 0;
 60   }
 61   input::-moz-placeholder, textarea::-moz-placeholder { color: #cccccc; }
 62   input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #cccccc; }
 63   input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #cccccc; }
 64
 65
 66 /*
 67
 68
 69
 70  头部导航
 71 */
 72
 73 header {
 74     height: 40px;
 75     line-height: 40px;
 76     background-color: #373b3e;
 77
 78 }
 79
 80 header h1 {
 81     font-weight: normal;
 82     text-align: center;
 83     font-size: 16px;
 84     color: #fff;
 85     font-family: ‘Franklin Gothic Medium‘, ‘Arial Narrow‘, Arial, sans-serif;
 86 }
 87 .myperson {
 88     display: block;
 89     position: absolute;
 90     top: 10px;
 91     right: 10px;
 92     width: 30px;
 93     height: 30px;
 94     background: url(../images/) no-repeat;
 95     background-size: 20px 20px;
 96 }
 97
 98 .backbtn {
 99     display: block;
100     float: left;
101     margin-top: 5px;
102     margin-left: 10px;
103     width: 25px;
104     height: 25px;
105     background: url(../images/icon-headback－left.png) no-repeat left center;
106     background-size: contain;
107 }
108
109 /*
110     本页
111 */
112
113 body{ background: #f2f2f2;}
114 a{ color: #666;}
115 .list-wrap {
116     padding: 10px;
117 }
118 .list-wrap section {
119     margin-bottom: 10px;
120 }
121 .banner-video{
122     position: relative;
123     overflow: hidden;
124 }
125 .img-responsive{ max-width: 100%;}
126 .banner-video span img{ display:block; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; position: absolute; top: 50%; left: 50%; z-index: 2;}
127 .intro-video{ padding: 10px; background:#fff;}
128 .intro-video h1{margin-bottom: 5px;  font-size: #666; font-weight: normal; max-height: 40px; font-size: 13px; overflow: hidden;}
129 .intro-video time{ font-size: 12px; color:#999;}