移动端-电影网-iphone

 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: 12px;
 7     }
 8 html,body
 9     {
10         font-family:"微软雅黑","宋体",Arail,Tabhoma;
11         text-align: left;
12         width: 100%;
13         height: 100%;
14     }
15 ul,ol
16     {
17         list-style: none;
18     }
19 img
20     {
21         border: 0 none;/*浏览器兼容问题，边框问题*/
22     }
23 input,select,textarea
24     {
25         outline:0;/*去除外面的实线*/
26     }
27 textarea
28 {
29     resize:none;/*固定文本框*/
30     overflow: auto;/*自定义的出现滚动条*/
31 }
32 table
33     {
34         border-collapse: collapse; 
35         border-spacing: 0;
36     }
37 th,strong,var,em
38     {
39         font-weight: normal; 
40         font-style: normal;
41     }
42 a
43     {
44         text-decoration: none;
45     }
46 
47 /*==========================Reset_End===========================*/

reset.css

 1 ._head
 2 {
 3     width:93.75%;
 4     overflow: hidden;
 5     margin: 0 auto;
 6     margin-top: 10px;
 7 }
 8 ._head img
 9 {
10     width: 115px;
11     height:19px ;
12     float: left;
13 }
14 ._head a
15 {
16     float: right;
17 }
18 ._head a img
19 {
20     width: 18px;
21     height:18px ;
22 }
23 ._line
24 {
25     width:99%;
26     height: 2px;
27     margin: 11px auto 0;
28     background:linear-gradient(to right,#d875f2 0%,#821fff 20%,#5c6bff 40%,#5274ff 60%,#5274ff 100%)
29 }

head.css

 1 ._login
 2 {
 3     width:43.4%;
 4     margin: 0 auto;
 5 }
 6 ._login img
 7 {
 8     height: auto;
 9     width:100%;
10 }
11 ._foot
12 {
13     width: 100%;
14     overflow: hidden;
15     margin-top:17px;
16 }
17 ._foot li
18 {
19     float: left;
20     margin-left:8px;
21 }
22 ._foot a
23 {
24     color: #666;
25     font-size: 0.5rem;
26 }

foot.css

 1 body, html { font-size: 100%;     padding: 0; margin: 0;}
 2 
 3 /* Reset */
 4 *,
 5 *:after,
 6 *:before {
 7     -webkit-box-sizing: border-box;
 8     -moz-box-sizing: border-box;
 9     box-sizing: border-box;
10 }
11 
12 /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
13 .clearfix:before,
14 .clearfix:after {
15     content: " ";
16     display: table;
17 }
18 
19 .clearfix:after {
20     clear: both;
21 }
22 body{
23     font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
24 }
25 a{color: #2fa0ec;text-decoration: none;outline: none;}
26 a:hover,a:focus{color:#74777b;}

default.css

 1 .slideBox{ position:relative; width:100%;  height:auto; overflow:hidden; margin:0px auto; }
 2 .slideBox .hd{ position:absolute; width:100%;  height:27px; bottom:0; left:0; z-index:1; }
 3 .slideBox .hd img{ width:11px;  }
 4 .slideBox .prev,.slideBox .next{ position:absolute; left:0; top:0; display:block; width:23px; height:27px; line-height:27px; text-align:center;   }
 5 .slideBox .next{ left:auto; right:0;}
 6 .slideBox .bd{ position:relative; z-index:0; }
 7 .slideBox .bd li{ position:relative; }
 8 .slideBox .bd li img{ width:100%;  height:152px; display:block;   }
 9 .slideBox .bd li a{ -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消链接高亮 */  }
10 .slideBox .bd li .tit{ display:block; width:100%;  position:absolute; bottom:0; text-indent:10px; height:27px; line-height:27px;  text-align:center;  color:#fff; background-color:rgba(0,0,0,0.7); ;
11 }

lunbotu

  1 .mainmenu {
  2     position:relative;
  3     margin: 10px auto 27px;
  4     width:96.25%;
  5 
  6 }
  7 
  8 .mainmenu > li {
  9     color: #f7f1e3;
 10     box-sizing: border-box;
 11     position:relative;
 12     padding:0 0 0 40px;
 13     width:100%;
 14     height: 29px;
 15     border: 1px solid #ccc;
 16     background: #f9f9f9;
 17 }
 18 
 19 /*.mainmenu > li:first-child {*/
 20 /*border-radius: 7px 7px 0 0;*/
 21 /*border-top: 0;*/
 22 /*}*/
 23 
 24 .mainmenu > li:last-child {
 25     border-radius: 0 0 7px 7px;
 26 }
 27 
 28 .mainmenu > li span {
 29     display:block;
 30     line-height: 48px;
 31 }
 32 
 33 .mainmenu > li .icon {
 34     float: left;
 35     width: 20px;
 36     height: 20px;
 37     display:block;
 38     position:absolute;
 39     left:10px;
 40     top:15px;
 41 }
 42 
 43 /*.mainmenu > li .messages {
 44     background: url("../images/messages.png") no-repeat;
 45     padding: 0;
 46     margin-top: -33px;
 47     margin-right: 19px;
 48     float: right;
 49     display: block;
 50     width: 34px;
 51     height: 18px;
 52     text-align: center;
 53     font-size: 11px;
 54     line-height: 19px;
 55 }*/
 56 
 57 /*.expand-triangle {
 58     !*background: url("../images/expand.gif") top left no-repeat;*!
 59     height: 10px;
 60     width: 276px;
 61     content: " ";
 62     margin-left: -40px;
 63 }*/
 64 
 65 /*------------ Sub Menu ------------*/
 66 .submenu {
 67     box-sizing: border-box;
 68     color: #ae9f9f;
 69     font-size: 13px;
 70     content: " ";
 71     /*opacity: 0.5;*/
 72     padding-top: 8px;
 73     padding-bottom: 8px;
 74     width:100%;
 75     /*  overflow: hidden;
 76       position: absolute;
 77       left: 0;
 78       top:30px ;*/
 79 }
 80 
 81 .submenu li {
 82     line-height: 20px;
 83     /*height: 35px;*/
 84     padding-top: 11px;
 85     /*margin-left: -40px;*/
 86     /*background-color: #484141;*/
 87     /*border-left: solid 6px #484141;*/
 88     transition: border-left 220ms ease-in;
 89     float: left;
 90     margin-left: 8px;
 91     width:30%;
 92     height: 154px;
 93     border: 0;
 94 }
 95 
 96 /*.submenu .chosen,
 97 .!*submenu .chosen:hover {
 98     border-left: solid 6px #96d145;
 99 }*!*/
100 
101 /*.submenu li:hover {
102     border-left: solid 6px #d05942;
103 }*/
104 
105 /*.submenu li span {*/
106 /*margin-left:30px;*/
107 /*}*/
108 
109 .animate {
110     animation: flip 2000ms ease-in-out alternate;
111 }
112 
113 @keyframes flip {
114     to {
115         transform: rotateY(360deg);
116     }
117 }

list.css

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <link rel="stylesheet" href="css/reset.css">
  7     <link rel="stylesheet" href="css/default.css">
  8     <link rel="stylesheet" href="css/head.css">
  9     <link rel="stylesheet" href="css/lunbotu.css">
 10     <link rel="stylesheet" href="css/foot.css">
 11     <link rel="stylesheet" href="css/list.css">
 12     <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">
 13     <style>
 14         .img1
 15         {
 16             width:11px;
 17             height: 6px;
 18             display: block;
 19             position: absolute;
 20             right: 3%;
 21             top:40%;
 22             transform: rotateZ(-90deg);
 23         }
 24         ._down1 li
 25         {
 26             float: left;
 27             margin-left: 8px;
 28             width:30%;
 29             height: 154px;
 30             border: 0;
 31         }
 32         .submenu a
 33         {
 34             width:100%;
 35             height: 100%;
 36             display: block;
 37             float: left;
 38             position: relative;
 39         }
 40         .submenu img
 41         {
 42             display: inline-block;
 43             width:100%;
 44             height: 85.5%;
 45             top: 0;
 46             left:0;
 47         }
 48         .submenu a span
 49         {
 50             display: block;
 51             position: absolute;
 52             top: 87%;
 53             left: 11px;
 54             color: #333333;
 55         }
 56 
 57        .mainmenu p
 58        {
 59            width:3px;
 60            height: 15px;
 61            background: #ff6600;
 62            border-radius: 5px;
 63            position: absolute;
 64            left: 1.6%;
 65            top: 20.7%;
 66        }
 67        .mainmenu p:nth-child(2)
 68        {
 69            font-size: 15px;
 70            position: absolute;
 71            left:5.8%;
 72            top:12.83% ;
 73        }
 74     </style>
 75 </head>
 76 <body>
 77     <div class="_head">
 78         <img src="images/logo.png" alt="">
 79         <a href=""><img src="images/search.png" alt=""></a>
 80     </div>
 81     <div class="_line">
 82 </div>
 83     <div id="slideBox" class="slideBox">
 84 
 85         <div class="bd">
 86             <ul>
 87                 <li>
 88                     <a class="pic" href="#"><img src="images/bg.jpg" /></a>
 89                     <a class="tit" href="#">两次曝光最新</a>
 90                 </li>
 91                 <li>
 92                     <a class="pic" href="#"><img src="images/bg.jpg"/></a>
 93                     <a class="tit" href="#">两次曝光最新</a>
 94                 </li>
 95                 <li>
 96                     <a class="pic" href="#"><img src="images/bg.jpg"/></a>
 97                     <a class="tit" href="#">两次曝光最新</a>
 98                 </li>
 99                 <li>
100                     <a class="pic" href="#"><img src="images/bg.jpg"/></a>
101                     <a class="tit" href="#">两次曝光最新</a>
102                 </li>
103             </ul>
104         </div>
105 
106         <div class="hd">
107             <span class="prev"><img src="images/sohu-prev.png"/></span>
108             <span class="next"><img src="images/sohu-next.png"/></span>
109         </div>
110 
111     </div>
112     <ul class="mainmenu">
113         <li>
114             <p></p>
115             <img src="images/jiatou.png" alt="" class="img1">
116         </li>
117         <ul class="submenu">
118             <!--<div class="expand-triangle"></div>-->
119             <li>
120                 <a href="">
121                     <img src="images/zhiqu.jpg" alt="">
122                     <span>智取威虎山</span>
123                 </a>
124             </li>
125             <li>
126                 <a href="">
127                     <img src="images/2012.jpg" alt="">
128                     <span>2012</span>
129                 </a>
130             </li>
131             <li>
132                 <a href="">
133                     <img src="images/suqi.jpg" alt="">
134                     <span>速度与激情7</span>
135                 </a>
136             </li>
137         </ul>
138         <li>
139             <p></p>
140             <img src="images/jiatou.png" alt="" class="img1">
141         </li>
142         <ul class="submenu">
143             <!--<div class="expand-triangle"></div>-->
144             <li>
145                 <a href="">
146                     <img src="images/suqi.jpg" alt="">
147                     <span>速度与激情7</span>
148                 </a>
149             </li>
150             <li>
151                 <a href="">
152                     <img src="images/2012.jpg" alt="">
153                     <span>2012</span>
154                 </a>
155             </li>
156             <li>
157                 <a href="">
158                     <img src="images/zhiqu.jpg" alt="">
159                     <span>智取威虎山</span>
160                 </a>
161             </li>
162         </ul>
163         <li>
164             <p></p>
165             <img src="images/jiatou.png" alt="" class="img1">
166         </li>
167         <ul class="submenu">
168             <!--<div class="expand-triangle"></div>-->
169             <li>
170                 <a href="">
171                     <img src="images/zhiqu.jpg" alt="">
172                     <span>智取威虎山</span>
173                 </a>
174             </li>
175             <li>
176                 <a href="">
177                     <img src="images/suqi.jpg" alt="">
178                     <span>速度与激情7</span>
179                 </a>
180             </li>
181             <li>
182                 <a href="">
183                     <img src="images/2012.jpg" alt="">
184                     <span>2012</span>
185                 </a>
186             </li>
187         </ul>
188         <li>
189             <p></p>
190             <img src="images/jiatou.png" alt="" class="img1">
191         </li>
192         <ul class="submenu">
193             <!--<div class="expand-triangle"></div>-->
194             <li>
195                 <a href="">
196                     <img src="images/zhiqu.jpg" alt="">
197                     <span>智取威虎山</span>
198                 </a>
199             </li>
200             <li>
201                 <a href="">
202                     <img src="images/suqi.jpg" alt="">
203                     <span>速度与激情7</span>
204                 </a>
205             </li>
206             <li>
207                 <a href="">
208                     <img src="images/2012.jpg" alt="">
209                     <span>2012</span>
210                 </a>
211             </li>
212         </ul>
213     </ul>
214     <div class="_login">
215         <img src="images/logo.png" alt="" >
216     </div>
217     <ol class="_foot">
218         <li>
219             <a href="">关于本站</a>
220         </li>
221         <li>
222             <a href="">常见问题</a>
223         </li>
224         <li>
225             <a href="">全站地图</a>
226         </li>
227         <li>
228             <a href="">意见反馈</a>
229         </li>
230         <li>
231             <a href="">京ICP证03018</a>
232         </li>
233     </ol>
234 
235 
236     <script src="js/jquery-1.8.3.min.js"></script>
237     <script src="js/script.js"></script>
238     <script src="js/TouchSlide.1.1.js"></script>
239 
240     <script type="text/javascript">
241         TouchSlide({slideCell: "#slideBox", mainCell: ".bd ul", effect: "leftLoop"});
242         $(function () {
243 
244         })
245     </script>
246 
247 
248 </body>
249 </html>

index.html

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

刷新页面返回顶部

舍近求猿

移动端-电影网-iphone

公告