index.html
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>响巢看看</title> 6 <link rel="stylesheet" href="css/base.css"> 7 <link rel="stylesheet" href="css/index.css"> 8 </head> 9 <body> 10 <!--头部 start--> 11 <div class="header w970"> 12 <!--logo start--> 13 <div class="logo fl"> 14 <embed src="images/logo.png" type=""> 15 </div> 16 <!--logo end--> 17 <!--搜索框 start--> 18 <div class="search fl"> 19 <form action=""> 20 <input class="keyword" type="text" value="金陵十三钗" /><input class="btn" type="submit" value="搜 索" /> 21 </form> 22 <p> 23 <a href="">热播榜</a> 24 <a href="">乡爱5结局</a> 25 <a href="">我的老爹</a> 26 <a href="">小姨多鹤</a> 27 <a href="">欧阳德</a> 28 <a href="">龙门飞甲</a> 29 <a href="">大冲锋</a> 30 </p> 31 </div> 32 <!--搜索框 end--> 33 <!--帮助 start--> 34 <div class="help fr"> 35 <p> 36 <a href="">登录</a> 37 <a href="">注册</a> 38 <a href="">迅雷会员</a> 39 <a href="" class="subscribe">订阅</a> 40 </p> 41 <p> 42 <a href="">会员专区</a> 43 <a href="">移动产品</a> 44 <a href="">游戏</a> 45 <a href="">帮助</a> 46 </p> 47 </div> 48 <!--帮助 end--> 49 </div> 50 <!--头部 end--> 51 <!--导航菜单start--> 52 <div class="menu w968 mt10"> 53 <ul class="mainnav"> 54 <li class="on"><a href="">首页</a></li> 55 <li><a href="">电影</a></li> 56 <li><a href="">电视剧</a></li> 57 <li><a href="">综艺</a></li> 58 <li><a href="">动漫</a></li> 59 <li><a href="">纪录片</a></li> 60 <li><a href="">视频快报</a></li> 61 <li><a href="">娱乐</a></li> 62 <li><a href="">电视台</a></li> 63 </ul> 64 <ul class="dp"> 65 <li class="line"><a href="">欧美大片</a></li> 66 <li><a href="">经典大片</a></li> 67 <li><a href="">华语大片</a></li> 68 <li class="new"><img src="images/new.png" alt="new"></li> 69 </ul> 70 <div> 71 <ul> 72 <li>我看过的<span></span></li> 73 <li>下载迅雷<span></span></li> 74 </ul> 75 </div> 76 </div> 77 <!--导航菜单end--> 78 <!--分类导航start--> 79 <div class="nav w970 mt10"> 80 <!--幻灯区域start--> 81 <div class="nav-left fl"> 82 <div class="big-pic"> 83 <a href=""><img src="images/pic01.jpg" alt="picture"></a> 84 <p> 有史以来最励志的电视纪录片,非常值得一看...</p> 85 </div> 86 <div class="small-pic"> 87 <ul> 88 <li style="margin-left:1px;"><img src="images/small01.jpg" alt="" class="on"></li> 89 <li><img src="images/small02.jpg" alt=""></li> 90 <li><img src="images/small03.jpg" alt=""></li> 91 <li><img src="images/small04.jpg" alt=""></li> 92 <li><img src="images/small05.jpg" alt=""></li> 93 <li><img src="images/small06.jpg" alt=""></li> 94 <li><img src="images/small07.jpg" alt=""></li> 95 <li><img src="images/small08.jpg" alt=""></li> 96 <li><img src="images/small09.jpg" alt=""></li> 97 <li><img src="images/small10.jpg" alt=""></li> 98 <li><img src="images/small11.jpg" alt=""></li> 99 <li style="margin-right:0"><img src="images/small12.jpg" alt=""></li> 100 </ul> 101 </div> 102 </div> 103 <!--幻灯区域end--> 104 <!--选项卡内容start--> 105 <div class="nav-right fl"> 106 <div class="option"> 107 <span>全部</span> 108 <span>电影</span> 109 <span>电视剧</span> 110 <span>综艺</span> 111 <span>动漫</span> 112 <span>记录</span> 113 </div> 114 <ol> 115 <li> 116 <strong class="top3">01</strong><a href="">深宫谍影</a><span>更新至26集</span><em>7.5</em><a href="" class="pic-link">深宫谍影</a> 117 </li> 118 <li> 119 <strong class="top3">02</strong><a href="">乡村爱情5</a><span>44集全</span><em>7.8</em><a href="" class="pic-link">乡村爱情5</a> 120 </li> 121 <li> 122 <strong class="top3">03</strong><a href="">如意</a><span>更新至39集</span><em>7.5</em><a href="" class="pic-link">如意</a> 123 </li> 124 <li> 125 <strong>04</strong><a href="">北京爱情故事</a><span>更新至29集</span><em>8.5</em><a href="" class="pic-link">北爱</a> 126 </li> 127 <li> 128 <strong>05</strong><a href="">北京爱情故事</a><span>更新至29集</span><em>8.5</em><a href="" class="pic-link">北爱</a> 129 </li> 130 <li> 131 <strong>06</strong><a href="">北京爱情故事</a><span>更新至29集</span><em>8.5</em><a href="" class="pic-link">北爱</a> 132 </li> 133 <li> 134 <strong>07</strong><a href="">北京爱情故事</a><span>更新至29集</span><em>8.5</em><a href="" class="pic-link">北爱</a> 135 </li> 136 <li> 137 <strong>08</strong><a href="">北京爱情故事</a><span>更新至29集</span><em>8.5</em><a href="" class="pic-link">北爱</a> 138 </li> 139 <li> 140 <strong>09</strong><a href="">北京爱情故事</a><span>更新至29集</span><em>8.5</em><a href="" class="pic-link">北爱</a> 141 </li> 142 <li> 143 <strong>10</strong><a href="">北京爱情故事</a><span>更新至29集</span><em>8.5</em><a href="" class="pic-link">北爱</a> 144 </li> 145 </ol> 146 <ul> 147 <li><a href="">新闻一：内容自拟</a></li> 148 <li><a href="">新闻二：内容自拟</a></li> 149 </ul> 150 </div> 151 <!--选项卡内容end--> 152 </div> 153 <!--分类导航end--> 154 </body> 155 </html>
base.css
1 @charset "utf-8"; 2 /* CSS Document */ 3 /***** css set*****/ 4 body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote，th,td{margin:0;padding:0;} 5 table{border-collapse:collapse;border-spacing:0;} 6 fieldset,img {border:0;} 7 address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 8 ol,ul {list-style:none;} 9 capation,th{text-align:left;} 10 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 11 q:before, q:after{content:' '} 12 abbr,acronym{border:0;} 13 14 /*****文字排版******/ 15 .f12{font-size:12px;} 16 .f13{font-size:13px;} 17 .f14{font-size:14px;} 18 .f16{font-size:16px;} 19 .f20{font-size:20px;} 20 .fb{font-weight:bold;} 21 .fn{font-weight:normal;} 22 .t2{text-indent:2em;} 23 .lh150{line-height:150%} 24 .lh180{line-height:180%} 25 .lh200{line-height:200%} 26 .unl{text-decoration:underline;} 27 .no_unl{text-decoration:none;} 28 /****定位****/ 29 .tl{text-align:left;} 30 .tc{text-align:center;} 31 .tr{text-align:right;} 32 .bc{margin-left:auto;margin-right:auto;} 33 .fl{float:left;display:inline;} 34 .fr{float:right;display:inline;} 35 .cb{clear:both;} 36 .cl{clear:left;} 37 .cr{clear:right;} 38 .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden} 39 .clearfix{display:inline-block;} 40 *html .clearfix{height:1%} 41 . Clearfix{display:block;} 42 .vm{vertical-align:center;} 43 .pr{position:relative;} 44 .pa{position:absolute;} 45 .abs-right{position:absolute;right:0;} 46 .zoom{zoom:1} 47 .hidden{visibility:hidden;} 48 .none{display:none;} 49 /******长度 高度*******/ 50 .w10{width:10px;} 51 .w20{width:20px;} 52 .w30{width:30px;} 53 .w40{width:40px;} 54 .w50{width:50px;} 55 .w60{width:60px;} 56 .w70{width:70px;} 57 .w80{width:80px;} 58 .w90{width:90px;} 59 .w100{width:100px;} 60 .w200{width:200px;} 61 .w300{width:300px;} 62 .w400{width:400px;} 63 .w500{width:500px;} 64 .w600{width:600px;} 65 .w700{width:700px;} 66 .w800{width:800px;} 67 .w{width:100%} 68 .h50{height:50px;} 69 .h80{height:80px;} 70 .h100{height:100px;} 71 .h200{height:200px;} 72 .h{height:100%} 73 /******边距*******/ 74 .m10{margin:10px;} 75 .m15{margin:15px;} 76 .m30{margin:30px;} 77 .mt5{margin-top:5px;} 78 .mt10{margin-top:10px;} 79 .mt15{margin-top:15px;} 80 .mt20{margin-top:20px;} 81 .mt30{margin-top:30px;} 82 .mt50{margin-top:50px;} 83 .mt100{margin-top:100px;} 84 .mb5{margin-bottom:5px;} 85 .mb10{margin-bottom:10px;} 86 .mb15{margin-bottom:15px;} 87 .mb20{margin-bottom:20px;} 88 .mb30{margin-bottom:30px;} 89 .mb50{margin-bottom:50px;} 90 .mb100{margin-bottom:100px;} 91 .ml5{margin-left:5px;} 92 .ml10{margin-left:10px;} 93 .ml15{margin-left:15px;} 94 .ml20{margin-left:20px;} 95 .ml30{margin-left:30px;} 96 .ml50{margin-left:50px;} 97 .ml100{margin-left:100px;} 98 .mr5{margin-right:5px;} 99 .mr10{margin-right:10px;} 100 .mr15{margin-right:15px;} 101 .mr20{margin-right:20px;} 102 .mr30{margin-right:30px;} 103 .mr50{margin-right:50px;} 104 .mr100{margin-right:100px;} 105 .p10{padding:10px;} 106 .p15{padding:15px;} 107 .p30{padding:30px;} 108 .pt5{padding-top:5px;} 109 .pt10{padding-top:10px;} 110 .pt15{padding-top:15px;} 111 .pt20{padding-top:20px;} 112 .pt30{padding-top:30px;} 113 .pt50{padding-top:50px;} 114 .pt100{padding-top:100px;} 115 .pb5{padding-bottom:5px;} 116 .pb10{padding-bottom:10px;} 117 .pb15{padding-bottom:15px;} 118 .pb20{padding-bottom:20px;} 119 .pb30{padding-bottom:30px;} 120 .pb50{padding-bottom:50px;} 121 .pb100{padding-bottom:100px;} 122 .pl5{padding-left:5px;} 123 .pl10{padding-left:10px;} 124 .pl15{padding-left:15px;} 125 .pl20{padding-left:20px;} 126 .pl30{padding-left:30px;} 127 .pl50{padding-left:50px;} 128 .pl100{padding-left:100px;} 129 .pr5{padding-right:5px;} 130 .pr10{padding-right:10px;} 131 .pr15{padding-right:15px;} 132 .pr20{padding-right:20px;} 133 .pr30{padding-right:30px;} 134 .pr50{padding-right:50px;} 135 .pr100{padding-right:100px;}
index.css
1 /* 2 author:guanghe 3 响巢看看首页 4 */ 5 /*首页的一些通用样式*/ 6 body {font-size: 12px; color:#666} 7 .w970 {width:970px; margin-left:auto; margin-right:auto;} 8 .w968 {width:968px; border:1px solid #ddd; margin-left:auto; margin-right:auto;} 9 a {text-decoration:none;} 10 a:hover {text-decoration:underline;} 11 12 /*头部的CSS*/ 13 .header {border:0px solid #ccc; overflow:hidden; height:78px; padding-top:20px;} 14 .logo {width:270px; height:70px;} 15 .logo embed {width:250px; height:80px; position:relative; top:-10px;} 16 .search {width:400px;} 17 。search form {border:3px solid #eee; width:394px; height:27px;} 18 .search .btn {width:68px; height: 27px; background:url(../images/headerpage.png) 19 no-repeat 0 -35px; border:none; color:#fff; font-weight:bold; font-size:14px;} 20 .search .keyword {width:325px; border: 1px solid #babebf; border-right:none; 21 height:24px; color:#999; padding-left:5px;} 22 .search p {margin-top:10px;} 23 .search p a {color:999; margin:0 3px} 24 .help {width:270px; text-align:right; color:#e6e6e6; margin-top:20px;} 25 .help p {line-height: 20px;} 26 .help a {color:#999} 27 .help .subscribe{background: url(../images/dy.png) no-repeat 0 1;padding-left:15px;} 28 29 /*导航菜单的样式*/ 30 .menu {height:34px; background:url(../images/headerpage.png) repeat-x 0 0; line-height:35px;} 31 .menu li {float:left; margin:0 10px;} 32 .menu li a{font-size:14px; color:#414141} 33 .menu li a:hover{color:#0081c2} 34 .menu .on a{color:#0081c2; font-weight:bold;} 35 .menu .dp a{font-size:12px;} 36 .menu .dp .line{background:url(../images/mainnavlist.png) no-repeat 0 0; padding-left:20px;} 37 .menu .new img{position:relative; left:-35px; top:-10px;} 38 .menu div li span{ display:inline-block; width:5px; height: 4px; 39 background:url(../images/headerpage.png) no-repeat 0 -62px; 40 position:relative; left:5px; top:-2px;} 41 /*分类导航样式*/ 42 .nav {height:380px; background:#000;} 43 .nav-left {margin-top:8px; width:740px;} 44 .nav-left .big-pic img {width:730px; height:310px;} 45 .nav-left .big-pic {position:relative;} 46 .nav-left .big-pic p {position:absolute; left:0; bottom:0; background:#000; 47 height:30px; line-height:30px; width:740px; font-size:14px; color:#fff; opacity:0.5;} 48 .small-pic {margin-top:5px;} 49 .small-pic li {float:left; width:59px;margin-left:0 2px 0 2px;height:48px; 50 background:url(../images/foucerank.png) no-repeat -228px -52px; } 51 .small-pic li img {width:56px;height:46px;margin:1px 0 0 1px;} 52 .small-pic li.on {background-position:-228px -0px;height:51px;position:relative;} 53 .small-pic li.on img {position:relative; top:4px; width}
