移动端-响应式-电影网1

 1 @charset "utf-8";
 2 /*=========================Reset_start==========================*/
 3 body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option
 4     {
 5         margin: 0; padding: 0;
 6         font-size: 0.9rem;
 7     }
 8 html
 9 {
10     font-size: 62.5%;
11 }
12 html,body
13     {
14         font-family:"微软雅黑","宋体",Arail,Tabhoma;
15         text-align: left;
16         width: 100%;
17         height: 100%;
18          background:#f1f1f1;
19     }
20 ul,ol
21     {
22         list-style: none;
23     }
24 img
25     {
26         border: 0 none;/*浏览器兼容问题，边框问题*/
27     }
28 input,select,textarea
29     {
30         outline:0;/*去除外面的实线*/
31     }
32 textarea
33 {
34     resize:none;/*固定文本框*/
35     overflow: auto;/*自定义的出现滚动条*/
36 }
37 table
38     {
39         border-collapse: collapse; 
40         border-spacing: 0;
41     }
42 th,strong,var,em
43     {
44         font-weight: normal; 
45         font-style: normal;
46     }
47 a
48     {
49         text-decoration: none;
50         list-style: none;
51     }
52 
53 /*==========================Reset_End===========================*/

reset.css

  1 .nav
  2 {
  3     width:100%;
  4     height: auto;
  5     overflow: hidden;
  6     padding-top: 15px;
  7     padding-bottom: 14px;
  8     background: #f0f0f0;
  9     margin: 0 auto;
 10 }
 11 .img1
 12 {
 13     width:27%;
 14     height: auto;
 15     float: left;
 16     padding-left: 14px;
 17 }
 18 .nav-check
 19 {
 20     float: right;
 21     padding-top: 10px;
 22 }
 23 .nav-check li
 24 {
 25     padding-left: 7px;
 26     padding-right: 8px;
 27     float: left;
 28     height: 31px;
 29     line-height:31px;
 30     text-align: center;
 31     margin-right: 10px;
 32     border-bottom: 3px solid #f0f0f0;
 33 }
 34 .nav-check a
 35 {
 36     /*font-size: 9px;*/
 37     color: #30353a;
 38 }
 39 .nav-check li:hover
 40 {
 41     border-bottom: 3px solid #127cb4;
 42 }
 43 html, body {
 44     width: 100%;
 45     position: relative;
 46     height: 100%;
 47 }
 48 body {
 49     background: #eee;
 50     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 51     /*font-size: 14px;*/
 52     color:#000;
 53     margin: 0;
 54     padding: 0;
 55 }
 56 .swiper-container {
 57     width: 100%;
 58     margin-left: auto;
 59     margin-right: auto;
 60 }
 61 .swiper-slide {
 62     text-align: center;
 63     /*font-size: 18px;*/
 64     background: #fff;
 65 
 66     /* Center slide text vertically */
 67     display: -webkit-box;
 68     display: -ms-flexbox;
 69     display: -webkit-flex;
 70     display: flex;
 71     -webkit-box-pack: center;
 72     -ms-flex-pack: center;
 73     -webkit-justify-content: center;
 74     justify-content: center;
 75     -webkit-box-align: center;
 76     -ms-flex-align: center;
 77     -webkit-align-items: center;
 78     align-items: center;
 79 }
 80 .swiper-wrapper img
 81 {
 82     width:100%;
 83     height: auto;
 84 }
 85 ._list
 86 {
 87     width:100%;
 88     height: auto;
 89 }
 90 ._list h3
 91 {
 92     color: #777777;
 93     padding-top: 17px;
 94     padding-left: 11px;
 95 }
 96 ._list-con
 97 {
 98     overflow: hidden;
 99     width:100%;
100     height: auto;
101 }
102 ._list-con li
103 {
104     float: left;
105     padding-top: 5px;
106     padding-left: 16px;
107     width: 17%;
108     border: 1px solid #ccc;
109     background: #fff;
110 }
111 ._list-con a
112 {
113     width:100%;
114     height: auto;
115     display: block;
116 }
117 ._list-con img
118 {
119     width:99%;
120     height: auto;
121 }
122 ._list-con p
123 {
124     padding-left: 2px;
125     padding-top: 7px;
126 }
127 ._list-con h4
128 {
129     padding-top: 17px;
130     padding-bottom: 5px;
131     color: #333333;
132 }
133 ._list-con h4 span:nth-child(1)
134 {
135     padding-left: 12px;
136     background: url("../images/person.png") 0px 0px no-repeat;
137     background-size: 9px 9px ;
138 }
139 ._list-con h4 span:nth-child(2)
140 {
141     margin-left:20%;
142     color: #ff6700;
143 }
144 ._ani
145 {
146     width: 100%;
147     height: auto;
148 }
149 ._aniTop
150 {
151     width: 100%;
152     height: auto;
153     overflow: hidden;
154 }
155 ._aniTop span
156 {
157     padding: 20px 0 5px 11px;
158     float: left;
159     font-size: 0.9rem;
160 }
161 ._aniTop a
162 {
163     float: right;
164     color: #333;
165     font-size: 0.9rem;
166     padding: 20px 30px 5px 0;
167 }
168 ._aniMain
169 {
170     width: 100%;
171     height: auto;
172     overflow: hidden;
173 }
174 ._aniMain video
175 {
176     padding-left: 11px;
177     width:37%;
178     height: auto;
179     border: 1px solid #d5d5d5;
180     background: #fff;
181     float: left;
182 }
183 ._aniList
184 {
185     padding-right: 11px;
186     float: left;
187     width: 58%;
188     height: auto;
189 }
190 ._aniList li
191 {
192     float: left;
193     width: 31%;
194     height: auto;
195     margin-left: 8px;
196     border: 1px solid #d5d5d5;
197 }
198 ._aniList a
199 {
200     width:100%;
201     height: auto;
202     display: block;
203 }
204 ._aniList img
205 {
206     display: block;
207     width:100%;
208     height: auto;
209 }
210 ._aniList li:nth-child(4)
211 {
212     margin-top: 9px;
213 }
214 ._aniList li:nth-child(5)
215 {
216     margin-top: 9px;
217 }
218 ._aniList li:nth-child(6)
219 {
220     margin-top: 9px;
221 }
222 .line
223 {
224     width: 100%;
225     height: 1px;
226     background: #dedede;
227     margin-top: 10px;
228     margin-bottom: 30px;
229 }
230 .foot
231 {
232     width:100%;
233     height: auto;
234 }
235 .img2
236 {
237     width:27.1%;
238     height: auto;
239     margin: 0 auto;
240     display: block;
241 }
242 .footNav
243 {
244     height: auto;
245     padding-left:24%;
246     padding-top: 15px;
247     margin-bottom: 15px;
248 }
249 .footNav a
250 {
251     font-size: 0.9rem;
252     margin-left: 17px;
253     color: #333;
254 }

style-ipad.css

  1 .nav
  2 {
  3     width:100%;
  4     height: auto;
  5     overflow: hidden;
  6     padding-top: 15px;
  7     padding-bottom: 14px;
  8     background: #f0f0f0;
  9     margin: 0 auto;
 10 }
 11 .img1
 12 {
 13     width:27%;
 14     height: auto;
 15     float: left;
 16     padding-left: 14px;
 17 }
 18 .nav-check
 19 {
 20     float: right;
 21     padding-top: 10px;
 22 }
 23 .nav-check li
 24 {
 25     padding-left: 7px;
 26     padding-right: 8px;
 27     float: left;
 28     height: 31px;
 29     line-height:31px;
 30     text-align: center;
 31     margin-right: 10px;
 32     border-bottom: 3px solid #f0f0f0;
 33 }
 34 .nav-check a
 35 {
 36     /*font-size: 9px;*/
 37     color: #30353a;
 38 }
 39 .nav-check li:hover
 40 {
 41     border-bottom: 3px solid #127cb4;
 42 }
 43 html, body {
 44     width: 100%;
 45     position: relative;
 46     height: 100%;
 47 }
 48 body {
 49     background: #eee;
 50     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 51     /*font-size: 14px;*/
 52     color:#000;
 53     margin: 0;
 54     padding: 0;
 55 }
 56 .swiper-container {
 57     width: 100%;
 58     margin-left: auto;
 59     margin-right: auto;
 60 }
 61 .swiper-slide {
 62     text-align: center;
 63     /*font-size: 18px;*/
 64     background: #fff;
 65 
 66     /* Center slide text vertically */
 67     display: -webkit-box;
 68     display: -ms-flexbox;
 69     display: -webkit-flex;
 70     display: flex;
 71     -webkit-box-pack: center;
 72     -ms-flex-pack: center;
 73     -webkit-justify-content: center;
 74     justify-content: center;
 75     -webkit-box-align: center;
 76     -ms-flex-align: center;
 77     -webkit-align-items: center;
 78     align-items: center;
 79 }
 80 .swiper-wrapper img
 81 {
 82     width:100%;
 83     height: auto;
 84 }
 85 ._list
 86 {
 87     width:100%;
 88     height: auto;
 89 }
 90 ._list h3
 91 {
 92     color: #777777;
 93     padding-top: 17px;
 94     padding-left: 11px;
 95 }
 96 ._list-con
 97 {
 98     overflow: hidden;
 99     width:100%;
100     height: auto;
101 }
102 ._list-con li
103 {
104     float: left;
105     padding-top: 5px;
106     padding-left: 13px;
107     width: 17%;
108     border: 1px solid #ccc;
109     background: #fff;
110 }
111 ._list-con a
112 {
113     width:100%;
114     height: auto;
115     display: block;
116 }
117 ._list-con img
118 {
119     width:99%;
120     height: auto;
121 }
122 ._list-con p
123 {
124     padding-left: 2px;
125     padding-top: 7px;
126 }
127 ._list-con h4
128 {
129     padding-top: 17px;
130     padding-bottom: 5px;
131     color: #333333;
132 }
133 ._list-con h4 span:nth-child(1)
134 {
135     padding-left: 12px;
136     background: url("../images/person.png") 0px 0px no-repeat;
137     background-size: 9px 9px ;
138 }
139 ._list-con h4 span:nth-child(2)
140 {
141     margin-left:20%;
142     color: #ff6700;
143 }
144 ._ani
145 {
146     width: 100%;
147     height: auto;
148 }
149 ._aniTop
150 {
151     width: 100%;
152     height: auto;
153     overflow: hidden;
154 }
155 ._aniTop span
156 {
157     padding: 20px 0 5px 11px;
158     float: left;
159     font-size: 0.9rem;
160 }
161 ._aniTop a
162 {
163     float: right;
164     color: #333;
165     font-size: 0.9rem;
166     padding: 20px 11px 5px 0;
167 }
168 ._aniMain
169 {
170     width: 100%;
171     height: auto;
172     overflow: hidden;
173 }
174 ._aniMain video
175 {
176     padding-left: 11px;
177     width:37%;
178     height: auto;
179     border: 1px solid #d5d5d5;
180     background: #fff;
181     float: left;
182 }
183 ._aniList
184 {
185     padding-right: 11px;
186     float: left;
187     width: 58%;
188     height: auto;
189 }
190 ._aniList li
191 {
192     float: left;
193     width: 30%;
194     height: auto;
195     margin-left: 7px;
196     border: 1px solid #d5d5d5;
197 }
198 ._aniList a
199 {
200     width:100%;
201     height: auto;
202     display: block;
203 }
204 ._aniList img
205 {
206     display: block;
207     width:100%;
208     height: auto;
209 }
210 ._aniList li:nth-child(4)
211 {
212     margin-top: 9px;
213 }
214 ._aniList li:nth-child(5)
215 {
216     margin-top: 9px;
217 }
218 ._aniList li:nth-child(6)
219 {
220     margin-top: 9px;
221 }
222 .line
223 {
224     width: 100%;
225     height: 1px;
226     background: #dedede;
227     margin-top: 10px;
228     margin-bottom: 30px;
229 }
230 .foot
231 {
232     width:100%;
233     height: auto;
234 }
235 .img2
236 {
237     width:27.1%;
238     height: auto;
239     margin: 0 auto;
240     display: block;
241 }
242 .footNav
243 {
244     height: auto;
245     padding-left:11% ;
246     padding-top: 15px;
247     margin-bottom: 15px;
248 }
249 .footNav a
250 {
251     font-size: 0.9rem;
252     margin-left: 17px;
253     color: #333;
254 }

style-512.css

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5 
  6     <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">
  7     <title>Title</title>
  8     <link rel="stylesheet" href="css/reset.css">
  9     <link rel="stylesheet" href="css/swiper.min.css">
 10     <link rel="stylesheet" media="screen (max-width:768px)" href="css/style-1024.css">
 11     <link rel="stylesheet" media="screen and (min-width:768px)" href="css/style-ipad.css">
 12     <style>
 13 
 14     </style>
 15 </head>
 16 <body>
 17     <div class="nav">
 18         <img src="images/logo.png" alt="logo" class="img1">
 19         <ul class="nav-check">
 20             <li class="mode-li"><a href="###">首页</a></li>
 21             <li><a href="###">电影</a></li>
 22             <li><a href="###">电视</a></li>
 23             <li><a href="###">动画片</a></li>
 24             <li><a href="###">纪录片</a></li>
 25             <li><a href="###">游戏</a></li>
 26         </ul>
 27     </div>
 28 <!-- 顶部导航栏 -->
 29     <div class="swiper-container">
 30         <div class="swiper-wrapper">
 31             <div class="swiper-slide"><img src="images/bg1.jpg" alt=""></div>
 32             <div class="swiper-slide"><img src="images/bg2.jpg" alt=""></div>
 33             <div class="swiper-slide"><img src="images/bg3.jpg" alt=""></div>
 34             <div class="swiper-slide"><img src="images/bg4.jpg" alt=""></div>
 35         </div>
 36         <!-- Add Pagination -->
 37         <div class="swiper-pagination"></div>
 38         <!-- Add Arrows -->
 39         <div class="swiper-button-next"></div>
 40         <div class="swiper-button-prev"></div>
 41     </div>
 42 <!-- 轮播图 -->
 43     <div class="_list">
 44         <h3>猜你喜欢</h3>
 45         <ol class="_list-con">
 46             <li>
 47                 <a href="###">
 48                     <img src="images/like-shenghua.jpg" alt="">
 49                     <p>生化危机</p>
 50                     <h4>
 51                         <span>121</span>
 52                         <span>8.5分</span>
 53                     </h4>
 54                 </a>
 55             </li>
 56             <li>
 57                 <a href="###">
 58                     <img src="images/like-nishijie.jpg" alt="">
 59                     <p>逆世界</p>
 60                     <h4>
 61                         <span>121</span>
 62                         <span>8.7分</span>
 63                     </h4>
 64                 </a>
 65             </li>
 66             <li>
 67                 <a href="###">
 68                     <img src="images/like-v.jpg" alt="">
 69                     <p>V字仇杀队</p>
 70                     <h4>
 71                         <span>121</span>
 72                         <span>9.1分</span>
 73                     </h4>
 74                 </a>
 75             </li>
 76             <li>
 77                 <a href="###">
 78                     <img src="images/like-heijin.jpg" alt="">
 79                     <p>黑金</p>
 80                     <h4>
 81                         <span>121</span>
 82                         <span>9分</span>
 83                     </h4>
 84                 </a>
 85             </li>
 86             <li>
 87                 <a href="###">
 88                     <img src="images/like-xue.jpg" alt="">
 89                     <p>雪国列车</p>
 90                     <h4>
 91                         <span>121</span>
 92                         <span>7.9分</span>
 93                     </h4>
 94                 </a>
 95             </li>
 96         </ol>
 97     </div>
 98 <!-- 猜你喜欢列表 -->
 99     <div class="_ani">
100         <div class="_aniTop">
101             <span>动漫</span>
102             <a href="##">更多></a>
103         </div>
104         <div class="_aniMain">
105             <video src="###" poster="images/ani-hua1.jpg"></video>
106             <ul class="_aniList">
107                 <li><a href="#"><img src="images/ani-hua.jpg" alt=""></a></li>
108                 <li><a href="#"><img src="images/ani-da.jpg" alt=""></a></li>
109                 <li><a href="#"><img src="images/ani-tai.jpg" alt=""></a></li>
110                 <li><a href="#"><img src="images/ani-xia.jpg" alt=""></a></li>
111                 <li><a href="#"><img src="images/ani-lan.jpg" alt=""></a></li>
112                 <li><a href="#"><img src="images/ani-yun.jpg" alt=""></a></li>
113             </ul>
114         </div>
115 
116     </div>
117  <!-- 动漫 -->
118     <div class="_ani">
119         <div class="_aniTop">
120             <span>综艺</span>
121             <a href="##">更多></a>
122         </div>
123         <div class="_aniMain">
124             <video src="###" poster="images/var-ben.jpg"></video>
125             <ul class="_aniList">
126                 <li><a href="#"><img src="images/var-gong.jpg" alt=""></a></li>
127                 <li><a href="#"><img src="images/var-ai.jpg" alt=""></a></li>
128                 <li><a href="#"><img src="images/var-ming.jpg" alt=""></a></li>
129                 <li><a href="#"><img src="images/var-yuan.jpg" alt=""></a></li>
130                 <li><a href="#"><img src="images/var-2.jpg" alt=""></a></li>
131                 <li><a href="#"><img src="images/var-ku.jpg" alt=""></a></li>
132             </ul>
133         </div>
134 
135     </div>
136 <!-- 综艺 -->
137     <div class="_ani">
138         <div class="_aniTop">
139             <span>综艺</span>
140             <a href="##">更多></a>
141         </div>
142         <div class="_aniMain">
143             <video src="###" poster="images/tv-qian.jpg"></video>
144             <ul class="_aniList">
145                 <li><a href="#"><img src="images/tv-lang.jpg" alt=""></a></li>
146                 <li><a href="#"><img src="images/tv-lie.jpg" alt=""></a></li>
147                 <li><a href="#"><img src="images/tv-yi.jpg" alt=""></a></li>
148                 <li><a href="#"><img src="images/tv-sheng.jpg" alt=""></a></li>
149                 <li><a href="#"><img src="images/tv-xiang.jpg" alt=""></a></li>
150                 <li><a href="#"><img src="images/tv-long.jpg" alt=""></a></li>
151             </ul>
152         </div>
153 
154     </div>
155 <!-- 国产剧 -->
156     <div class="line"></div>
157 <!-- 分界线 -->
158     <div class="foot">
159         <img src="images/logo.png" alt="" class="img2">
160         <div class="footNav">
161             <a href="">关于本站</a>
162             <a href="">常见问题</a>
163             <a href="">全站地图</a>
164             <a href="">意见反馈</a>
165             <a href="">京ICP证03018</a>
166         </div>
167     </div>
168 <script src="js/swiper.min.js"></script>
169 <script >
170     var swiper = new Swiper('.swiper-container', {
171         pagination: '.swiper-pagination',
172         nextButton: '.swiper-button-next',
173         prevButton: '.swiper-button-prev',
174         slidesPerView: 1,
175         paginationClickable: true,
176         spaceBetween: 30,
177         loop: true
178     });
179 </script>
180 </body>
181 </html>

index.html

posted @ 2016-10-19 20:01 舍近求猿阅读(195) 评论(0) 编辑收藏举报

刷新页面返回顶部

舍近求猿

移动端-响应式-电影网1

公告