第四次作业(迅雷看看未完待续)

1.知识总结

Emmet

  • Emmet早期名字叫Zen Coding
    作用:快速地书写html和css
  • 快捷键:
    1.ctrl+e
    2.tab
  • 常用的写法:
  1. html:5,html:xt +快捷键,调出html的基本骨架。html:5+快捷键,调出html5的基本结构;html:xt+快捷键,调出xhtml1.0的基本结构。
  2. 简单元素的写法:标签名称 快捷键。例如:div p
    div+快捷键=<div></div>
  3. 带class的元素的写法:标签名称.类名 快捷键。例如:div.box div.box.header
  4. 带id的元素的写法:标签名称#id 快捷键。例如:div#box
  5. 元素既有id,又有class的写法:
    div#box.header+快捷键=<div id="box" class="header"></div>
  6. 兄弟级并列关系的元素写法:兄标签+弟标签。
    例如:h1+h2+快捷键= < h1 >< /h1 > < h2 >< /h2 >
  7. 父子级的嵌套关系的写法:父标签>子标签。
  8. 如果让某个元素重复,可以用* 。 例如:div * 4
  9. 如果某个数值是递增的,可以用$,配合*。例如:div.box*4
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>迅雷看看</title>
<style>
.head{
width: 970px;
height: 109px;
position: relative;
}
.head1{
    width: 970px;
    height: 109px;
    background: url(img1/xunleikankan.jpg) no-repeat 23px 34px;
}
.head2{
    width: 970px;
    height: 109px;
    background:url(img1/52cun.jpg) no-repeat 188px 30px;
    position: absolute;
    top:0px;
}
.head3{
    width:401px;
    height: 89px;
    position: absolute;
    left: 290px;
    top:0px;
    padding-top:20px;
}
a{
    font-size :12px;
    color:#999999;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
.head3 form{
    width:394px;
    height:27px;
    border:3px solid #eeeeee;
}
.head33{
    width:326px;
    height:24px;
    border:1px solid #babebf;
    border-right: none;
    font-size: 12px;
    font-family: "宋体";
    color: #999999;
    text-indent: 6px;
}
.head34{
    width: 67px;
    height: 27.6px;
    background-image: url(img1/lantu.jpg);
    position: absolute;
    top:22.8px;
    outline: none;
    border:0 none;
    font-size:14px;
    font-family: "宋体";
    color:#fff;
}
.head3 p a{
    font-size: 12px;
    margin:0 2px;
}
.head4{
    width: 180px;
    height: 109px;
    
    position: absolute;
    left:691px;
    top:0px;
}
.head41{
    width: 190px;
    height: 14px;
    position: absolute;
    left:90px;
    top:24px;
}
.head41 p a{
    font-size:12px;

}
.head42{
    width: 198px;
    height: 14px;
    position: absolute;
    left :81px;
    top:54px;
}
.head42 p a{
    font-size: 12px;
}
.head411{
    width:33px;
    height:12px;
    border-right:1px solid #e6e6e6;
    display: inline-block;
}
.head412{
    width:33px;
    height:12px;
    border-right:1px solid #e6e6e6;
    display: inline-block;
}
.head413{
    width:57px;
    height:12px;
    border-right:1px solid #e6e6e6;
    display: inline-block;
}
.head414{
    width:39px;
    height:12px;
    display: inline-block;
    text-indent: 15px;
    background: url(img1/xinfeng.jpg) no-repeat 0px 1px;
}
.head421{
    width:57px;
    height:12px;
    border-right:1px solid #e6e6e6;
    display: inline-block;
}
.head422{
    width:57px;
    height:12px;
    border-right:1px solid #e6e6e6;
    display: inline-block;
}
.head423{
    width:33px;
    height:12px;
    border-right:1px solid #e6e6e6;
    display: inline-block;
}
.head424{
    width:24px;
    height:12px; 
    display: inline-block;
}
.body1{
    width:968px;
    height:35px;
    border:1px solid #dddddd;
    background: url(img1/xiaotiao.jpg) no-repeat 513px 10px;
    position:relative;
}
.body11 a:hover {
    color:#0081cc;
}
.body11 .body111{
    color :#0081cc;
    font-weight: bold;
}
.body11 p a{
    float:left ;
    margin :0px 10px;
    font-size: 14px;
    color:black;
}
.body12 p a{
    float:left ;
    margin :0px 2px;
    font-size: 12px;
    text-indent:19px;
    color:black;
}
.body12{
    width:220px;
    height:35px;
    float:left;
    background: url(img1/new.jpg) no-repeat 196px 5px;
}
.body13{
    float:left;
    margin:0px 67px;
    position: relative;
}

.body131{
    width:57px;
    height:12px;
    background: url(img1/daosanjiao.jpg) no-repeat 52px 5px ;
    position:absolute;  
}
.body132{
    width:57px;
    height:12px;
    background: url(img1/daosanjiao.jpg) no-repeat 52px 5px;
    position:absolute;
    left:68px;

}
.body p{
    float: left;
    font-size: 12px;
    color:#666666;
}
.body2{
    width:970px;
    height: 365px;
    margin-top:10px;
    padding: 8px 0 7px 0;
    background-color:black;
}
.body21{
    float: left;
    width:740px;
    height: 365px;
    position: relative;
}
.body21 div{
    width:740px;
    height:310px;

}
.body21 div img{
    width: 740px;
    height: 310px;
}
.body21 li {
    list-style-type: none;
    width:56px;
    height: 45px;
    background: url(img1/kuangkuang.jpg);
    padding: 1px;
}
.body21 .body211{
    position: absolute;
    left:0px;
    top:315px;
    background: url(img1/xuanzhongkuang.gif) no-repeat;
    padding: 1px;
    padding-top: 5px;
    
}
.body21 .body212{
    position: absolute;
    left:62px;
    top:318px;
}
.body21 .body213{
    position: absolute;
    left:124px;
    top:318px;
}
.body21 .body214{
    position: absolute;
    left:186px;
    top:318px;
}
.body21 .body215{
    position: absolute;
    left:248px;
    top:318px;
}
.body21 .body216{
    position: absolute;
    left:310px;
    top:318px;
}
.body21 .body217{
    position: absolute;
    left:372px;
    top:318px;
}
.body21 .body218{
    position: absolute;
    left:434px;
    top:318px;
}
.body21 .body219{
    position: absolute;
    left:496px;
    top:318px;
}
.body21 .body2110{
    position: absolute;
    left:558px;
    top:318px;
}
.body21 .body2111{
    position: absolute;
    left:620px;
    top:318px;
}
.body21 .body2112{
    position: absolute;
    left:682px;
    top:318px;
}
.body22{
    float: left;
    width:217px;
    height: 353px;
    background:url(img1/hei.jpg) ;
    border:1px solid #393939;
    padding:10px 5px 0px ;
    position: relative;
}
.body22 .body221{
    width: 210px;
    height: 21px;
    list-style-type: none;
    border-left:1px solid #545454;
    border-top:1px solid #545454;
    font-size: 12px;
    line-height: 20px;
    color:#545454;
}
.body22 .body221 li{
    padding:0 4px;
    border-right:1px solid #545454;
    border-bottom:1px solid #545454;
    float:left;
    font-size: 5px;
}
.body2211{
    background:#6f6f6f;
    color:#fff;
}
.body22 .body221 li .cur{
    background-color:#6f6f6f;
}
.body22 ul{
    margin:0;
    padding:0px;
    list-style-type: none;
}
.body22 ol{
    list-style-type: none;
    margin:0;
    padding:0;
    color:#666666;
    font:12px/12px "宋体";
    margin-top: 5px;
    margin-bottom: 6px;
}
.body22 ol li{
    line-height: 27px;
}
.body22 ol li span{
    width:19px;
    height: 14px;
    border:1px solid #4d4d4d;
    text-align: center;
    line-height: 14px;
    font:8px/14px "宋体";
    color:#666666;
}
.body22 ol li a{
    font:12px/12px "宋体";
    margin-left: 4px;
    margin-right: 6px;
}
.body22  .body222 span{
    background: #29b6e9;
    color:#fff;
    font-weight: bold;
}
.body22 ol li strong{
    float:right;
    margin-right:1px;
    font-size:8px;
    font-family: "宋体";
}
.body223 li a{
    margin-left:9px;
    color:#df7e0d;
    font:12px/20px "宋体";
}
.body224{
    width:3px;
    height: 3px;
    background:#dd7d0a;
    position: absolute;
    left:5px;
    bottom:37px;
}
.body225{
    width:3px;
    height: 3px;
    background:#dd7d0a;
    position: absolute;
    left:5px;
    bottom:17px;
}
.body3{
    width:968px;
    height:438px;
    border:1px solid #dddddd;
    margin-top: 10px;
    position: relative;
}
.body3 .body31{
    display: inline-block;
    width:161px;
    height:438px;
    border-right: 1px solid #dddddd;
}
.body3 .body31 .body311{
    width:161px;
    height:3px;
    background:#e188c2;
}
.body3 .body31 .body312{
    width:58px;
    height:14px;
    font: bold 14px/14px "宋体";
    position: absolute;
    left:51px;
    top:19px;
    color:#e188cd;
}
.body3 .body31 .body313{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:10px;
    top:50px;
    background:url(img1/tu/tu1.jpg) no-repeat 1px 1px;
}
.body3 .body31 .body314{
    width:140px;
    height:14px;
    position: absolute;
    left:10px;
    top:155px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body31 .body314 span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body3 .body31 .body315{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:10px;
    top:182px;
    background:url(img1/tu/tu7.jpg) no-repeat 1px 1px;
}
.body3 .body31 .body316{
    width:140px;
    height:27px;
    border-bottom: 1px dashed #dddddd;
    position: absolute;
    left:10px;
    top:287px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body31 .body316 span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body31 ul{
    position: absolute;
    list-style-type: none;
    margin-top:338px;
    padding-left:10px;
}
.body31 ul li{
    font:14px/24px "宋体";
}
.body31 ul li span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body31 .body317{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body31 .body318 span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body3 .body32{
    display: inline-block;
    width:153px;
    height:438px;
    border-right: 1px solid #dddddd;
    position: relative;
}
.body3 .body32 .body321{
    width:161px;
    height:3px;
    background:#879ac5;
    position: absolute;
    left:-8px;
}
.body3 .body32 .body322{
    width:58px;
    height:14px;
    font: bold 14px/14px "宋体";
    position: absolute;
    left:43px;
    top:19px;
    color:#597398;
}
.body3 .body32 .body323{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:2px;
    top:50px;
    background:url(img1/tu/tu2.jpg) no-repeat 1px 1px;
}
.body3 .body32 .body324{
    width:140px;
    height:14px;
    position: absolute;
    left:2px;
    top:155px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body32 .body324 span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body3 .body32 .body325{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:2px;
    top:182px;
    background:url(img1/tu/tu8.jpg) no-repeat 1px 1px;
}
.body3 .body32 .body326{
    width:140px;
    height:27px;
    border-bottom: 1px dashed #dddddd;
    position: absolute;
    left:2px;
    top:287px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body32 .body326 span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body32 ul{
    position: absolute;
    list-style-type: none;
    margin-top:338px;
    padding-left:2px;
}
.body32 ul li{
    font:14px/24px "宋体";
}
.body32 ul li span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body32 .body327{
    font:12px/12px "宋体";
    color:#aaaaaa;
}

.body .body33{
    display: inline-block;
    width:152px;
    height:438px;
    border-right: 1px solid #dddddd;
    position: relative;
    }
.body3 .body33 .body331{
    width:160px;
    height:3px;
    background:#a6a6a6;
    position: absolute;
    left:-8px;
}
.body3 .body33 .body332{
    width:58px;
    height:14px;
    font: bold 14px/14px "宋体";
    position: absolute;
    left:43px;
    top:19px;
    color:#7777a1;
}
.body3 .body33 .body333{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:2px;
    top:50px;
    background:url(img1/tu/tu3.jpg) no-repeat 1px 1px;
}
.body3 .body33 .body334{
    width:140px;
    height:14px;
    position: absolute;
    left:2px;
    top:155px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body33 .body334 span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body3 .body33 .body335{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:2px;
    top:182px;
    background:url(img1/tu/tu9.jpg) no-repeat 1px 1px;
}
.body3 .body33 .body336{
    width:140px;
    height:27px;
    border-bottom: 1px dashed #dddddd;
    position: absolute;
    left:2px;
    top:287px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body33 .body336 span{
    font:8px/8px "宋体";
    color:#aaaaaa;
}
.body33 ul{
    position: absolute;
    list-style-type: none;
    margin-top:338px;
    padding-left:2px;
}
.body33 ul li{
    font:14px/24px "宋体";
}
.body33 ul li span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body33 .body337{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body .body34{
    display: inline-block;
    width:152px;
    height:438px;
    border-right: 1px solid #dddddd;
    position: relative;
}
.body3 .body34 .body341{
    width:160px;
    height:3px;
    background:#7ec0da;
    position: absolute;
    left:-8px;
}
.body3 .body34 .body342{
    width:58px;
    height:14px;
    font: bold 14px/14px "宋体";
    position: absolute;
    left:43px;
    top:19px;
    color:#8d99c5;
}
.body3 .body34 .body343{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:2px;
    top:50px;
    background:url(img1/tu/tu4.jpg) no-repeat 1px 1px;
}
.body3 .body34 .body344{
    width:140px;
    height:14px;
    position: absolute;
    left:2px;
    top:155px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body34 .body345{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:2px;
    top:182px;
    background:url(img1/tu/tu10.jpg) no-repeat 1px 1px;
}
.body3 .body34 .body346{
    width:140px;
    height:27px;
    border-bottom: 1px dashed #dddddd;
    position: absolute;
    left:2px;
    top:287px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body34 .body346 span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body34 ul{
    position: absolute;
    list-style-type: none;
    margin-top:338px;
    padding-left:2px;
}
.body34 ul li{
    font:14px/24px "宋体";
}
.body34 ul li span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body34 .body347{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body .body35{
    display: inline-block;
    width:154px;
    height:438px;
    border-right: 1px solid #dddddd;
    position: relative;
    }
.body3 .body35 .body351{
    width:162px;
    height:3px;
    background:#e18786;
    position: absolute;
    left:-8px;
}
.body3 .body35 .body352{
    width:58px;
    height:14px;
    font: bold 14px/14px "宋体";
    position: absolute;
    left:42px;
    top:19px;
    color:#d83438;
}
.body3 .body35 .body353{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:1px;
    top:50px;
    background:url(img1/tu/tu5.jpg) no-repeat 1px 1px;
}
.body3 .body35 .body354{
    width:140px;
    height:14px;
    position: absolute;
    left:1px;
    top:155px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body35 .body354 span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body3 .body35 .body355{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:1px;
    top:182px;
    background:url(img1/tu/tu11.jpg) no-repeat 1px 1px;
}
.body3 .body35 .body356{
    width:140px;
    height:27px;
    border-bottom: 1px dashed #dddddd;
    position: absolute;
    left:1px;
    top:287px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body35 .body356 span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body35 ul{
    position: absolute;
    list-style-type: none;
    margin-top:338px;
    padding-left:1px;
}
.body35 ul li{
    font:14px/24px "宋体";
}
.body35 ul li span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body35 .body357{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body .body36{
    display: inline-block;
    position: relative;
    }
.body3 .body36{
    display: inline-block;
    width:150px;
    height:438px;
    }
.body3 .body36 .body361{
    width:158px;
    height:3px;
    background:#e4cd6f;
    position: absolute;
    left:-8px;
}
.body3 .body36 .body362{
    width:58px;
    height:14px;
    font: bold 14px/14px "宋体";
    position: absolute;
    left:42px;
    top:19px;
    color:#c69067;
}
.body3 .body36 .body363{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:1px;
    top:50px;
    background:url(img1/tu/tu6.jpg) no-repeat 1px 1px;
}
.body3 .body36 .body364{
    width:140px;
    height:14px;
    position: absolute;
    left:1px;
    top:155px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body36 .body364 span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body3 .body36 .body365{
    width:138px;
    height:98px;
    border:1px solid #eeeeee;
    position: absolute;
    left:1px;
    top:182px;
    background:url(img1/tu/tu12.jpg) no-repeat 1px 1px;
}
.body3 .body36 .body366{
    width:140px;
    height:27px;
    border-bottom: 1px dashed #dddddd;
    position: absolute;
    left:1px;
    top:287px;
    font:14px/14px "宋体";
    background:url(img1/xiaoshu.jpg) no-repeat 132px 3px;
}
.body3 .body36 .body366 span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body36 ul{
    position: absolute;
    list-style-type: none;
    margin-top:338px;
    padding-left:1px;
}
.body36 ul li{
    font:14px/24px "宋体";
}
.body36 ul li span{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body36 .body367{
    font:12px/12px "宋体";
    color:#aaaaaa;
}
.body4{
    width:968px;
    height:168px;
    border:1px solid #dddddd;
    margin-top: 10px;
    position: relative;
}
.body4 h2{
    font:bold 16px/16px "宋体";
    position: absolute;
    left:10px;
}
.body4 del{
    width:48px;
    height:19px;
    background:url(img1/guanbi.jpg);
    font:12px/19px "宋体";
    text-indent: 5px;
    text-decoration: none;
    color:#3d3d3d;
    cursor:pointer;
    position: absolute;
    right: 0px;
    top:0px;
}
.body4 .body41{
    width:710px;
    height: 168px;
    float: left;
    position: relative;
}
.body4 .body42{
    float: right;
    width:220px;
    height:168px;
    margin-right: 10px;
}
.body411{
    float: right;
    display: inline;
}
.body411 p{
    font:12px/12px "宋体";
    color:#666666;
    position: absolute;
    left:344px;
    top:2px;
}
.body411 li{
    float: left;
    list-style-type: none;
}
.body411 ol{
    position: absolute;
    left:586px;
    top:3px;
}
.body411 ol li{
    width:6px;
    height:6px;
    background:url(img1/xiaoyuandian.jpg);
    float: left;
    margin-right: 6px;
}
.body411 li{
    list-style-type: none;
}
.body411 ul{

}
.body411 ul li{
    width:24px;
    height:15px;
    float:left;
    background:url(img1/zuojiantou.jpg);
    margin-top:-1px;
}
.body411 .body4112{
    width:24px;
    height:15px;
    float:left;
    background:url(img1/youjiantou.jpg);
}
</style>
</head>
<body>
<div class="box">
    <div class="head">
        <div class="head1"></div>
        <div class="head2"></div>
        <div class="head3">
            <form action="">
                <input type="text" name="text" class="head33" value="金陵十二钗" /><input type="submit" class="head34" value="搜 索" />
            </form>
            <p>
                <a href="">热播榜</a>
                <a href="">乡爱5结局</a>
                <a href="">我的老爹</a>
                <a href="">小姨多鹤</a>
                <a href="">欧阳德</a>
                <a href="">龙门飞甲</a>
                <a href="">大冲锋</a>
            </p>
        </div>
        <div class="head4">
            <div class="head41">
                <p>
                    <a href="" class="head411">登陆</a>
                    <a href="" class="head412">注册</a>
                    <a href="" class="head413">迅雷会员</a>
                    <a href="" class="head414">订阅</a>
                </p>
            </div>
            <div class="head42">
                <p>
                    <a href="" class="head421">会员专区</a>
                    <a href="" class="head422">移动产品</a>
                    <a href="" class="head423">游戏</a>
                    <a href="" class="head424">帮助</a>
                </p>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="body1">
            <div class="body11">
                <p>
                    <a href="" class="body111">首页</a>
                    <a href="" class="cur">电影</a>
                    <a href="">电视剧</a>
                    <a href="">综艺</a>
                    <a href="">动漫</a>
                    <a href="">纪录片</a>
                    <a href="">视频快报</a>
                    <a href="">娱乐</a>
                    <a href="">电视台</a>
                </p>
            </div>
            <div class="body12" class="body121">
                <p>
                    <a href="">欧美大片</a>
                    <a href="">经典大片</a>
                    <a href="">华语大片</a>
                </p>
            </div>
            <div class="body13">
                <p class="body131">我看过的</p>
                <p class="body132">下载迅雷</p>
            </div>
        </div>
        <div class="body2">
            <div class="body21">
                <div><a href="">![](img1/big.jpg)</a></div>
                <ul>
                    <li class="body211">![](img1/small/small1.jpg)</li>
                    <li class="body212">![](img1/small/small2.jpg)</li>
                    <li class="body213">![](img1/small/small3.jpg)</li>
                    <li class="body214">![](img1/small/small4.jpg)</li>
                    <li class="body215">![](img1/small/small5.jpg)</li>
                    <li class="body216">![](img1/small/small6.jpg)</li>
                    <li class="body217">![](img1/small/small7.jpg)</li>
                    <li class="body218">![](img1/small/small8.jpg)</li>
                    <li class="body219">![](img1/small/small9.jpg)</li>
                    <li class="body2110">![](img1/small/small10.jpg)</li>
                    <li class="body2111">![](img1/small/small11.jpg)</li>
                    <li class="body2112">![](img1/small/small12.jpg)</li>
                </ul>
            </div>
            <div class="body22" >
                <ul class="body221">
                    <li>全部</li>
                    <li class="body2211">电影</li>
                    <li>电视剧</li>
                    <li>综艺</li>
                    <li>动漫</li>
                    <li>记录</li>
                </ul>
                <ol>
                    <li class="body222"><span>01</span><a href="">深宫间谍</a>更新至26集<strong>7.5</strong></li>
                    <li class="body222"><span>02</span><a href="">乡村爱情5</a>44集全<strong>7.8</strong></li>
                    <li class="body222"><span>03</span><a href="">如意</a>更新至39集<strong>7.3</strong></li>
                    <li><span>04</span><a href="">北京爱情故事</a>39集全<strong>8.5</strong></li>
                    <li><span>05</span><a href="">怪侠欧阳德</a>69集全<strong>9.5</strong></li>
                    <li><span>06</span><a href="">北京爱情故事</a>39集全<strong>8.5</strong></li>
                    <li><span>07</span><a href="">怪侠欧阳德</a>69集全<strong>9.5</strong></li>
                    <li><span>08</span><a href="">北京爱情故事</a>39集全<strong>8.5</strong></li>
                    <li><span>09</span><a href="">怪侠欧阳德</a>69集全<strong>9.5</strong></li>
                    <li><span>10</span><a href="">北京爱情故事</a>39集全<strong>8.5</strong></li>
                </ol>
                <ul class="body223">
                    <li><a href="">3.11日大地震周年祭:废墟依然触目</a></li>
                    <li><a href="">[揭秘]曝美一集团称可乐含致癌物!</a></li>
                </ul>
                <div class="body224"></div>
                <div class="body225"></div>
            </div>
        </div>
        <div class="body3">
            <div class="body31">
                <div class="body311"></div>
                <div class="body312">热门大片</div>
                <div class="body313"></div>
                <div class="body314">仙境之桥<span>(720P)</span></div>
                <div class="body315"></div>
                <div class="body316">桃色惊魂<span>(720P)</span></div>
                <ul>
                    <li>鬼域<span>(480P)</span></li>
                    <li class="body317">获金像奖最佳视觉效果</li>
                    <li class="body318">龙门飞甲<span>(数字商城)</span></li>
                    <li class="body317">徐克3D武侠巨制</li>
                </ul>
            </div>
            <div class="body32">
                <div class="body321"></div>
                <div class="body322">男性影院</div>
                <div class="body323"></div>
                <div class="body324">天崩地裂<span>(720P)</span></div>
                <div class="body325"></div>
                <div class="body326">赤裸特工<span>(720P)</span></div>
                <ul>
                    <li>一夜未了情<span>(720P)</span></li>
                    <li class="body327">上床就更容易相爱难</li>
                    <li class="body328">超级女特工<span>(720P)</span></li>
                    <li class="body327">伟大的绝艳女战士</li>
                </ul>
            </div>
            <div class="body33">
                <div class="body331"></div>
                <div class="body332">同步卫视</div>
                <div class="body333"></div>
                <div class="body334">如意(42集全)<span>(720P)</span></div>
                <div class="body335"></div>
                <div class="body336">千山暮雪<span>(720P)</span></div>
                <ul>
                    <li>泊车殿下<span>(至03集)</span></li>
                    <li class="body337">台湾俊男美女热血暴力</li>
                    <li class="body338">租个女友回家过年<span>(全)</span></li>
                    <li class="body337">过年回家单身族挨不住</li>
                </ul>
            </div>
            <div class="body34">
                <div class="body341"></div>
                <div class="body342">TVB剧场</div>
                <div class="body343"></div>
                <div class="body344">千年之王重出江湖</div>
                <div class="body345"></div>
                <div class="body346">老公万岁<span>(20集全)</span></div>
                <ul>
                    <li>刑警<span>(30集全)</span></li>
                    <li class="body347">港式口味高智商死亡罪案</li>
                    <li class="body348">妙手仁心3<span>(40集全)</span></li>
                    <li class="body347">林保怡携手黎姿解读医学</li>
                </ul>
            </div>
            <div class="body35">
                <div class="body351"></div>
                <div class="body352">海外剧场</div>
                <div class="body353"></div>
                <div class="body354">女儿是花儿<span>(至70集)</span></div>
                <div class="body355"></div>
                <div class="body356">太阳的新娘<span>(至86集)</span></div>
                <ul>
                    <li>极道鲜师<span>(33集全)</span></li>
                    <li class="body357">真人版麻辣鲜师热血励志</li>
                    <li class="body358">要帅气的生活<span>(至45集)</span></li>
                    <li class="body357">剩女“脱光记”</li>
                </ul>
            </div>
            <div class="body36">
                <div class="body361"></div>
                <div class="body362">人气综艺</div>
                <div class="body363"></div>
                <div class="body364">非诚勿扰<span>(02-19期)</span></div>
                <div class="body365"></div>
                <div class="body366">快乐大本营<span>(02-18期)</span></div>
                <ul>
                    <li>本山快乐营<span>(02-22期)</span></li>
                    <li class="body367">宋小宝精彩片段集锦</li>
                    <li class="body368">英国达人秀<span>(18集全)</span></li>
                    <li class="body367">脱衣舞娘天籁嗓音</li>
                </ul>
            </div>
        </div>
        <div class="body4">
            <h2>猜你喜欢看</h2>
            <div class="body41">
                <div class="body411">
                    <p class="fl">根据您的观看记录,为您推荐的,您还可以点击换一组</p>
                    <ol class="fl">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ol>
                    <ul class="fl">
                        <li class="body4111"></li>
                        <li class="body4112"></li>
                    </ul>
                </div>
                


            </div>
            <div class="body42"></div>
            <del>关闭</del>
        </div>
        <div class="body5"></div>
        <div class="body6"></div>
        <div class="body7"></div>
        <div class="body8"></div>
        <div class="body9"></div>
        <div class="body10"></div>
    </div>
</div>
</body>
</html>

效果图截图

Paste_Image.png
Paste_Image.png

百度网盘链接: http://pan.baidu.com/s/1dF9nKw5
密码: 8qw2

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,628评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,455评论 32 459
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,418评论 1 19
  • 一、运算符 1.算数预算符: 加(+)减(-)乘(*)除(/) 模,取余(%); 2.赋值运算符: = ...
    形象代言人阅读 113评论 0 0
  • 是的,你没有听错。 这固沙的,不是大型藻类,是微藻。 传统上的荒漠化治理方式 一是植树种草。 植树,即栽种树苗,或...
    藻华阅读 1,633评论 2 6