这是腾讯视频电影频道页面,没有全都做出来,只是做了其中的一部分,有一些图片和文字也没有换。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>腾讯视频电影频道</title>
- <style>
- body,h1,h3{
- margin: 0;
- }
- ul{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- a{
- text-decoration: none;
- }
- img{
- vertical-align: top;
- border: none;
- }
- input{
- padding: 0;
- border: none;
- }
- a{
- color: #202020;
- }
- .fl{
- float: left;
- }
- .fr{
- float: right;
- }
- .clearfix:after{
- content: "";
- display: block;
- clear: both;
- }
- .bg{
- background: url(../img/bg.png) no-repeat;
- }
- .bg-vip{
- width: 28px;
- height: 18px;
- background-position: -24px -277px;
- position: absolute;
- top: 5px;
- right: 5px;
- }
- .bg-prevue{
- width: 32px;
- height: 18px;
- background-position: -52px -277px;
- position: absolute;
- top: 5px;
- right: 5px;
- }
- .bg-made{
- width: 32px;
- height: 18px;
- background-position: -84px -277px;
- position: absolute;
- top: 5px;
- right: 5px;
- }
- .bg-play{
- width: 32px;
- height: 18px;
- background-position: -116px -277px;
- position: absolute;
- top: 5px;
- right: 5px;
- }
- .bg-number{
- line-height: 12px;
- color: #fff;
- padding: 4px;
- background-color: rgba(0,0,0,0.5);
- position: absolute;
- left: 4px;
- bottom: 4px;
- }
- .list-number{
- width: 40px;
- height: 40px;
- font: 40px/40px arial;
- color: #aaa;
- text-align: center;
- position: absolute;
- left: 0;
- top: 242px;
- }
- .fs14{
- font-size: 14px;
- }
- .fs18{
- font-size: 18px;
- }
- .mr5{
- margin-right: 5px;
- }
- .mr10{
- margin-right: 10px;
- }
- .mr20{
- margin-right: 20px;
- }
- .mb7{
- margin-bottom: 7px;
- }
- .mb9{
- margin-bottom: 9px;
- }
- .mb39{
- margin-bottom: 39px;
- }
- .mt16{
- margin-top: 16px;
- }
- .h337{
- height: 337px;
- }
- .br{
- border-right: 1px solid #ddd;
- box-sizing: border-box;
- }
- .con-title{
- padding-bottom: 24px;
- }
- .con-title-text{
- font: bold 28px/28px arial,"宋体";
- }
- .con-title-right-text{
- line-height: 12px;
- margin: 17px 0 0 11px;
- font-weight: bold;
- }
- .con-title-text span{
- color: #ff5945;
- }
- .all-list-text{
- display: block;
- padding-left: 5px;
- }
- .color-999{
- color: #999;
- }
- .pr{
- position: relative;
- }
- .wh{
- width: 76px;
- height: 47px;
- }
- .point{
- width: 12px;
- height: 12px;
- margin: 0 auto;
- border-radius: 6px;
- }
- .date{
- font: 12px/12px "宋体";
- margin: 2px 0 3px;
- text-align: center;
- }
- .day{
- font: 18px/18px "宋体";
- text-align: center;
- position: relative;
- }
- .color1{
- color: #999;
- }
- .sub-title{
- line-height: 20px;
- margin-left: 22px;
- margin-top: 9px;
- font-weight: bold;
- }
- .bb{
- border-bottom: 3px solid #ff6428;
- }
- .bor-b{
- border-bottom: 3px solid #ff6428;
- box-sizing: border-box;
- }
- .list{
- width: 167px;
- margin-right: 5px;
- position: relative;
- }
- .sub-title-left{
- line-height: 12px;
- margin: 13px 0 0 14px;
- }
- .lh20{
- line-height: 20px;
- }
- /*--主体部分--*/
- body{
- font: 12px/22px arial,"宋体";
- }
- #box{
- width: 100%;
- }
- /*--我的节目单--*/
- #box .mylist{
- height: 40px;
- background-position: 0 -46px;
- background-repeat: repeat-x;
- position: relative;
- }
- #box .mylist .mylist-bgc{
- height: 40px;
- background-color: #000000;
- opacity: 0.6;
- }
- #box .mylist .mylist-text{
- height: 40px;
- width: 130px;
- margin: -40px auto 0;
- position: relative;
- z-index: 1;
- }
- #box .mylist-text .text-play{
- margin: 11px 8px 0 0;
- width: 18px;
- height: 18px;
- text-indent: -9999px;
- background-position: 0 -86px;
- }
- #box .mylist-text .text-link{
- width: 91px;
- font: 12px/12px "宋体";
- color:#fff;
- margin-top: 16px;
- }
- #box .mylist-text .text-menu{
- width: 12px;
- height: 8px;
- margin: 18px 0 0;
- text-indent: -9999px;
- background-position: -18px -86px;
- }
- #box .mylist .mylist-close{
- width: 8px;
- height: 8px;
- background-position: -30px -86px;
- position: absolute;
- top: 16px;
- right: 41px;
- }
- /*--头部区域--*/
- #box .head{
- height: 580px;
- margin-bottom: 50px;
- position: relative;
- }
- #box .head .head-bg{
- display: block;
- height: 580px;
- background: #3e4854 url(../img/head-bg.jpg) no-repeat center top;
- }
- #box .head .head-top{
- width: 100%;
- position: absolute;
- top: 0;
- }
- #box .head-top .head-top-text{
- width: 1200px;
- height: 44px;
- padding-top: 9px;
- margin: 0 auto;
- }
- #box .head-top .top-title{
- width: 134px;
- height: 40px;
- margin-left: 1px;
- text-indent: -9999px;
- background-position: 0 -104px;
- }
- #box .head-top-text .top-nav a{
- margin-top: 16px;
- line-height: 18px;
- color: #FFFFFF;
- }
- #box .top-nav .top-nav-bg1{
- width: 5px;
- height: 5px;
- margin: 5px 7px 8px 10px;
- background-position: -148px -277px;
- }
- #box .top-nav .top-nav-bg2{
- width: 16px;
- height: 14px;
- margin: 0 6px 4px 17px;
- background-position: -153px -277px;
- }
- #box .top-nav .top-nav-bg3{
- width: 15px;
- height: 14px;
- margin: 1px 7px 4px 17px;
- background-position: -169px -277px;
- }
- #box .head-top .top-search{
- margin: 3px 0 0 91px;
- font: 16px/40px "宋体";
- position: relative;
- }
- #box .top-search .search-text{
- width: 274px;
- height: 40px;
- padding-left: 20px;
- border-radius: 20px 0 0 20px;
- background-color: #727a84;
- vertical-align: top;
- color: #eee;
- }
- #box .top-search .search-submit{
- width: 106px;
- height: 40px;
- border-radius: 0 20px 20px 0;
- background-image: linear-gradient(90deg,#ff840b,#ff5944);
- vertical-align: top;
- margin-left: -8px;
- color: #fff;
- text-indent: 10px;
- }
- #box .top-search .search-rank{
- position: absolute;
- top: 13px;
- left: 220px;
- color: #ff6428;
- width: 62px;
- height: 14px;
- }
- #box .top-search .rank-bg{
- display: inline-block;
- width: 13px;
- height: 14px;
- background-position: -38px -86px;
- vertical-align: top;
- }
- #box .top-search .rank-text{
- display: inline-block;
- margin-left: -2px;
- font: 14px/14px "宋体";
- vertical-align: top;
- }
- #box .top-search .rank-bg1{
- width: 18px;
- height: 18px;
- position: absolute;
- top: 10px;
- left: 312px;
- background-position: -51px -86px;
- }
- #box .head-top .top-other{
- height: 42px;
- padding-top: 2px;
- }
- #box .top-other span{
- display: block;
- text-align: center;
- font: 12px/12px arial,"宋体";
- }
- #box .top-other .vip{
- width: 20px;
- margin: 7px 9px 0;
- }
- #box .vip .vip-bg{
- width: 20px;
- height: 19px;
- margin-bottom: 4px;
- background-position: 0 -144px;
- }
- #box .vip .vip-text{
- color: #ffcf5d;
- }
- #box .top-other .look{
- width: 24px;
- margin: 7px 9px 0;
- }
- #box .look .look-bg{
- width: 18px;
- height: 18px;
- margin:0 auto 5px;
- background-position: -20px -144px;
- }
- #box .look .look-text,
- #box .file .file-text,
- #box .dl .dl-text{
- color: #e9e9e9;
- }
- #box .top-other .file{
- width: 24px;
- margin: 8px 9px 0;
- }
- #box .file .file-bg{
- width: 16px;
- height: 17px;
- margin:0 auto 5px;
- background-position: -38px -144px;
- }
- #box .top-other .dl{
- width: 60px;
- }
- #box .dl .dl-bg{
- width: 48px;
- height: 24px;
- margin:0 0 6px 20px;
- background-position: -54px -144px;
- }
- #box .top-other .login{
- width: 40px;
- height: 40px;
- margin: 2px 0 0 9px;
- background-position: -102px -144px;
- text-indent: -9999px;
- }
- #box .head .head-mid{
- margin:-512px auto 0;
- width: 225px;
- height: 366px;
- padding: 56px 0 0 15px;
- background-image: linear-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,0.9) 25%,rgba(255,255,255,0.9) 75%,rgba(255,255,255,0) 100%);
- position: relative;
- left: 480px;
- }
- #box .head-mid .mid-text{
- width: 225px;
- height: 366px;
- padding: 56px 0 0 15px;
- position: absolute;
- top: 0;
- left: 0;
- }
- #box .mid-text .ml-text{
- display: block;
- font: 12px/30px arial,"宋体";
- }
- #box .mid-text .ml-text1{
- display: block;
- font: 24px/24px arial,"宋体";
- color: #ff6428;
- }
- #box .mid-text .ml-text2{
- color: #666;
- }
- #box .head .head-bottom{
- width: 100%;
- height: 106px;
- position: absolute;
- top: 490px;
- background-image: linear-gradient(rgba(255,255,255,0.9) 0,rgba(255,255,255,1) 100%);
- }
- #box .head-bottom .head-bottom-nav{
- width: 1200px;
- height: 106px;
- margin: 0 auto;
- }
- #box .head-bottom-nav .nav-top{
- border-bottom: 1px solid #dddddd;
- box-sizing: border-box;
- position: relative;
- }
- #box .nav-top .nav-top-text{
- font: 14px/24px arial,"宋体";
- padding-right: 20px;
- margin-top: 23px;
- margin-bottom: 19px;
- }
- #box .nav-top .nav-top-line{
- width: 14px;
- height: 8px;
- background-position: -202px -277px;
- position: absolute;
- left: 16px;
- top: 59px;
- }
- #box .nav-top .pr28{
- padding-right: 28px;
- }
- #box .nav-top .pr72{
- padding-right: 72px;
- }
- #box .nav-top .vault{
- width: 18px;
- height: 16px;
- margin: 4px 6px 0 0;
- background-position: -184px -277px;
- }
- #box .nav-bot .nav-bot-text{
- font: 14px/24px arial,"宋体";
- padding-right: 26px;
- margin-top: 16px;
- color: #666;
- }
- /*--内容区域--*/
- #box .content{
- width: 1200px;
- height: 4140px;
- margin: 0 auto;
- }
- #box .content .hot{
- height: 392px;
- margin-bottom: 32px;
- }
- #box .hot .hot-list{
- width: 196px;
- margin-right: 4px;
- margin-bottom: 16px;
- }
- #box .hot .hot-list-wh{
- width: 598px;
- height: 337px;
- }
- #box .hot-list-img .install{
- width: 588px;
- height: 21px;
- position: absolute;
- left: 7px;
- bottom: 8px;
- }
- #box .install .install-left{
- width: 21px;
- height: 21px;
- margin-right: 8px;
- background-position: -216px -277px;
- }
- #box .install .install-mid{
- line-height: 12px;
- color: #fff;
- margin-top: 6px;
- }
- #box .install-right .ins-submit{
- width: 85px;
- height: 24px;
- color: #fff;
- background-color: #ff7800;
- }
- #box .content .recent{
- height: 402px;
- }
- #box .recent .recent-time{
- height: 6px;
- width: 1200px;
- background-color: #eee;
- margin: 35px 0 24px;
- }
- #box .recent-list .add{
- width: 40px;
- height: 40px;
- background-position: -308px -239px;
- position: absolute;
- top: 242px;
- left: 127px;
- }
- #box .time1{
- position: absolute;
- top: -38px;
- left: 49px;
- }
- #box .time2{
- position: absolute;
- top: -38px;
- left: 221px;
- }
- #box .time3{
- position: absolute;
- top: -38px;
- left: 393px;
- }
- #box .time4{
- position: absolute;
- top: -38px;
- left: 565px;
- }
- #box .time5{
- position: absolute;
- top: -38px;
- left: 737px;
- }
- #box .time6{
- position: absolute;
- top: -38px;
- left: 909px;
- }
- #box .time7{
- position: absolute;
- top: -38px;
- left: 1081px;
- }
- #box .time1 .point{
- background-color: #ff6428;
- position: relative;
- }
- #box .time2 .point{
- background-color: #ff9f41;
- position: relative;
- }
- #box .day .good{
- width: 42px;
- height: 26px;
- background-position: -264px -239px;
- position: absolute;
- bottom: 5px;
- left: 70px;
- }
- #box .time3 .point{
- background-color: #ffc02a;
- }
- #box .time4 .point,
- #box .time5 .point,
- #box .time6 .point,
- #box .time7 .point{
- background-color: #ddd;
- }
- #box .content .expect{
- height: 70px;
- position: absolute;
- right: 10px;
- bottom: 10px;
- }
- #box .expect .expect-left{
- height: 33px;
- margin: 34px 8px 0 0;
- }
- #box .expect-left .expect-left-text{
- display: block;
- text-align: right;
- line-height: 12px;
- color: #fff;
- }
- #box .expect .expect-right{
- width: 6px;
- height: 70px;
- }
- #box .expect .expect-right-top{
- width: 6px;
- height: 14%;
- background-color: #fff;
- border-radius: 3px 3px 0 0;
- }
- #box .expect .expect-right-hot{
- width: 6px;
- height: 86%;
- background-image: linear-gradient(#f5424b,#ff952a);
- border-radius: 0 0 3px 3px;
- }
- #box .rank-list .all-list-text{
- padding-left: 40px;
- }
- #box .rank-list .color2{
- color: #ff4545;
- }
- #box .rank-list .color3{
- color: #ff7928;
- }
- #box .rank-list .color4{
- color: #f3c112;
- }
- #box .content .topic{
- height: 270px;
- }
- #box .topic .topic-list{
- width: 274px;
- height: 198px;
- margin: 20px 26px 0 0;
- }
- #box .topic-list .topic-list-img{
- box-shadow: 10px -10px 0 #e7e7e7,20px -20px 0 #f8f8f8;
- }
- #box .topic-list .topic-list-text{
- display: block;
- font: 16px/46px arial,"宋体";
- text-align: center;
- }
- #box .content .ten{
- height: 416px;
- }
- #box .ten-head .con-title{
- padding-bottom: 19px;
- }
- #box .ten-star a{
- width: 200px;
- height: 71px;
- margin-bottom: 13px;
- }
- #box .ten-star .ten-star-img{
- width: 60px;
- height: 60px;
- margin-bottom: 11px;
- }
- #box .ten-star .ten-star-img img{
- border-radius: 30px;
- }
- #box .ten-star .ten-star-name{
- font: bold 16px/16px arial,"宋体";
- margin: 16px 0 0 10px;
- }
- #box .movie-all-list{
- margin: 15px 0;
- }
- #box .movie-all-list-text{
- position: absolute;
- left: 15px;
- bottom: 48px;
- }
- #box .movie-all-list-text .movie-all-list-text1{
- height: 48px;
- width: 120px;
- margin-bottom: 45px;
- font: 14px/24px arial,"宋体";
- color: #fff;
- }
- #box .movie-all-list-text .movie-all-list-text2{
- width: 120px;
- font: 12px/22px arial,"宋体";
- color: #fff;
- }
- #box .movie-all-list-text .w184{
- width: 184px;
- }
- #box .movie-all-list .movie-all-first{
- position: absolute;
- left: 0;
- bottom: 47px;
- width: 162px;
- }
- #box .movie-all-first .movie-all-first-text1{
- width: 106px;
- height: 84px;
- margin:0 auto 24px;
- color: #a9a9a9;
- line-height: 21px;
- }
- #box .movie-all-first .movie-all-first-text2{
- display: block;
- width: 72px;
- height: 18px;
- margin: 0 auto;
- color: #ff6428;
- font: 14px/16px "宋体";
- }
- #box .movie-all-first-text2 .movie-all-first-text2-change{
- width: 19px;
- height: 18px;
- margin-right: 5px;
- background-position: -237px -277px;
- }
- #box .content .link{
- height: 92px;
- border: 1px solid #f5f5f5;
- box-sizing: border-box;
- }
- #box .link .link-content{
- width: 784px;
- height: 70px;
- margin: 0 auto;
- padding-top: 10px;
- }
- #box .link-content .link-submit{
- width: 90px;
- height: 28px;
- color: #fff;
- font-size: 12px;
- margin: 19px 0 0 20px;
- border-radius: 18px;
- background-image: linear-gradient(90deg,#ff840c,#ff5a44);
- }
- /*--底部区域--*/
- #box .foot{
- height: 371px;
- border-top: 2px solid #ff6428;
- }
- #box .foot a{
- color: #999;
- }
- #box .foot-top h3{
- font: bold 18px/48px "宋体";
- }
- #box .foot-top a{
- display: block;
- font: 12px/28px arial,"宋体";
- }
- #box .foot .foot-top{
- width: 1200px;
- margin: 30px auto 0;
- }
- #box .foot-top .top-hot{
- width: 320px;
- margin-left: 40px;
- }
- #box .foot-top .top-rec{
- width: 220px;
- }
- #box .foot-top .top-download{
- width: 470px;
- }
- #box .top-download a{
- width: 60px;
- margin: 5px 10px;
- text-align: center;
- line-height: 66px;
- }
- #box .top-download a span{
- display: block;
- width: 60px;
- height: 46px
- }
- #box .top-download .windows{
- background-position: -60px 0;
- }
- #box .top-download .mac{
- background-position: -120px 0;
- }
- #box .top-download .ipad{
- background-position: -180px 0;
- }
- #box .top-download .tv{
- background-position: -240px 0;
- }
- #box .foot-top .top-service{
- width: 150px;
- }
- #box .foot .foot-bottom div{
- text-align: center;
- color: #999;
- line-height: 12px;
- margin-bottom: 18px;
- }
- #box .foot-bottom .top-text{
- display: inline-block;
- line-height: 12px;
- border-right: 2px solid #999;
- padding-right: 6px;
- margin-right: 3px;
- }
- #box .foot .nopd,
- #box .head .nopd{
- padding-right: 0;
- }
- #box .foot .nobr{
- border: none;
- }
- #box .foot .nomr,
- #box .content .nomr{
- margin-right: 0;
- }
- #box .content .nomt{
- margin-top: 0;
- }
- #box .content .nomb{
- margin-bottom: 0;
- }
- #box .fix{
- position: fixed;
- right: 20px;
- bottom: 40px;
- }
- #box .fix a{
- display: block;
- width: 40px;
- height: 40px;
- }
- #box .fix .fix-v{
- background-position: -460px -86px;
- }
- #box .fix .fix-i{
- background-position: -460px -126px;
- }
- #box .fix .fix-d{
- background-position: -460px -166px;
- }
- #box .fix .fix-t{
- background-position: -460px -206px;
- }
- </style>
- </head>
- <body>
- <!--模块容器section#box-->
- <section id="box">
- <!--我的节目单div.mylist-->
- <div class="mylist bg">
- <div class="mylist-bgc"></div>
- <div class="mylist-text">
- <a href="" class="text-play bg fl">
- play
- </a>
- <a href="" class="text-link fl">
- 我的追剧节目单
- </a>
- <a href="" class="text-menu bg fl">
- menu
- </a>
- </div>
- <a href="" class="mylist-close bg"></a>
- </div>
- <!--头部区域header.head-->
- <header class="head">
- <a href="" class="head-bg"></a>
- <div class="head-top">
- <div class="head-top-text">
- <h1 class="clearfix fl">
- <a href="" class="top-title bg fl">腾讯视频</a>
- </h1>
- <h3 class="top-nav fl">
- <a href="" class="fl fs18">
- <span class="top-nav-bg1 bg fl"></span>
- 电影
- </a>
- <a href="" class="fl fs14">
- <span class="top-nav-bg2 bg fl"></span>
- 首页
- </a>
- <a href="" class="fl fs14">
- <span class="top-nav-bg3 bg fl"></span>
- 频道
- </a>
- </h3>
- <div class="top-search fl">
- <form action="">
- <input class="search-text" type="text" value="儿科医生" name=""/>
- <input class="search-submit" type="submit" value="全网搜" name=""/>
- </form>
- <a href="" class="search-rank">
- <span class="rank-bg bg"></span>
- <span class="rank-text">热搜榜</span>
- </a>
- <a href="" class="rank-bg1 bg"></a>
- </div>
- <div class="top-other fr">
- <a href="" class="vip fl">
- <span class="vip-bg bg"></span>
- <span class="vip-text">VIP</span>
- </a>
- <a href="" class="look fl">
- <span class="look-bg bg"></span>
- <span class="look-text">看过</span>
- </a>
- <a href="" class="file fl">
- <span class="file-bg bg"></span>
- <span class="file-text">上传</span>
- </a>
- <a href="" class="dl fl">
- <span class="dl-bg bg"></span>
- <span class="dl-text">下载客户端</span>
- </a>
- <a href="" class="login bg fl">
- 登录
- </a>
- </div>
- </div>
- </div>
- <div class="head-mid">
- <div class="mid-text">
- <a href="" class="ml-text mb6">
- <span class="ml-text1">绣春刀·修罗战场</span>
- <span class="ml-text2">原班人马打造暗黑新武侠</span>
- </a>
- <a href="" class="ml-text">
- 回放:2017腾讯视频星光大赏
- </a>
- <a href="" class="ml-text">
- 喜欢你:周冬雨金城武超萌之恋
- </a>
- <a href="" class="ml-text">
- 全员单恋:8段单恋揭恋爱潜规则
- </a>
- <a href="" class="ml-text">
- 英伦对决:63岁成龙暴揍特工007
- </a>
- <a href="" class="ml-text">
- 清醒梦2:爆笑兄弟摊上致命快递
- </a>
- <a href="" class="ml-text">
- 傲娇与偏见:热巴张云龙上演
- </a>
- <a href="" class="ml-text">
- 空天猎:长空激战惊心动魄
- </a>
- <a href="" class="ml-text">
- 长城:中西大军长城战怪兽
- </a>
- <a href="" class="ml-text">
- VIP会员全场5折:12月1日-3日
- </a>
- </div>
- </div>
- <div class="head-bottom">
- <nav class="head-bottom-nav">
- <div class="nav-top clearfix">
- <a href="" class="nav-top-text fl">最新栏目</a>
- <a href="" class="nav-top-text fl">最新上架</a>
- <a href="" class="nav-top-text fl br mr20">最近热播</a>
- <a href="" class="nav-top-text fl">内地</a>
- <a href="" class="nav-top-text fl">香港</a>
- <a href="" class="nav-top-text fl">美国</a>
- <a href="" class="nav-top-text fl">韩国</a>
- <a href="" class="nav-top-text fl pr28 br mr20">欧洲</a>
- <a href="" class="nav-top-text fl">喜剧</a>
- <a href="" class="nav-top-text fl">惊悚</a>
- <a href="" class="nav-top-text fl">冒险</a>
- <a href="" class="nav-top-text fl">动作</a>
- <a href="" class="nav-top-text fl pr28 br mr20">犯罪</a>
- <a href="" class="nav-top-text fl">成龙</a>
- <a href="" class="nav-top-text fl">刘德华</a>
- <a href="" class="nav-top-text fl">吴京</a>
- <a href="" class="nav-top-text fl pr72 br mr20">黄渤</a>
- <a href="" class="nav-top-text fr nopd">
- <span class="fl vault bg"></span>
- 电影片库
- </a>
- <div class="nav-top-line fl bg"></div>
- </div>
- <div class="nav-bot">
- <a href="" class="nav-bot-text fl">豆瓣评分</a>
- <a href="" class="nav-bot-text fl">热搜电影</a>
- <a href="" class="nav-bot-text fl">排行榜</a>
- <a href="" class="nav-bot-text fl">会员专享</a>
- <a href="" class="nav-bot-text fl">用户好评</a>
- <a href="" class="nav-bot-text fl">精选独播</a>
- <a href="" class="nav-bot-text fl">林正英鬼片</a>
- <a href="" class="nav-bot-text fl">周星驰经典</a>
- <a href="" class="nav-bot-text fl">亲子电影</a>
- <a href="" class="nav-bot-text fl">漫威出品</a>
- <a href="" class="nav-bot-text fl">星球大战全系列</a>
- <a href="" class="nav-bot-text fl">周润发暴力美学</a>
- </div>
- </div>
- </div>
- </header>
- <!--内容区域div.content-->
- <div class="content">
- <!--院线热映-->
- <div class="hot">
- <header class="hot-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">院线热映</a>
- </h3>
- <div class="con-title-right fr">
- <a href="" class="con-title-right-text fl">
- 至暗时刻
- </a>
- <span class="con-title-right-text fl color1">·</span>
- <a href="" class="con-title-right-text fl">
- 烟花
- </a>
- <span class="con-title-right-text fl color1">·</span>
- <a href="" class="con-title-right-text fl">
- 夺金四贱客
- </a>
- <span class="con-title-right-text fl color1">·</span>
- <a href="" class="con-title-right-text fl">
- 寻梦环游记
- </a>
- <span class="con-title-right-text fl color1">·</span>
- <a href="" class="con-title-right-text fl">
- 12月观影指南
- </a>
- </div>
- </header>
- <ul class="clearfix">
- <li class="hot-list hot-list-wh fl">
- <div class="hot-list-img pr">
- <a href="">
- <img src="../img/dream-8.png"/>
- </a>
- <div class="install clearfix">
- <div class="install-left bg fl">
- </div>
- <span class="install-mid fl">
- 安装腾讯视频客户端,看超清更流畅
- </span>
- <div class="install-right fr">
- <form action="">
- <input class="ins-submit" type="submit" value="立即安装"/>
- </form>
- </div>
- </div>
- </div>
- </li>
- <li class="hot-list fl">
- <div class="hot-list-img mb7 pr">
- <a href="">
- <img src="../img/dream-1.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- </div>
- <a href="" class="all-list-text">
- 老父亲问"为什么不理我"
- </a>
- <span class="all-list-text color-999">
- 天安门国旗哨兵瞬间流泪
- </span>
- </li>
- <li class="hot-list fl">
- <div class="hot-list-img mb7 pr">
- <a href="">
- <img src="../img/dream-2.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- </div>
- <a href="" class="all-list-text">
- 宁波发生爆炸:房屋坍塌
- </a>
- <span class="all-list-text color-999">
- 烟尘弥漫致2死2重伤
- </span>
- </li>
- <li class="hot-list fl nomr">
- <div class="hot-list-img mb7 pr">
- <a href="">
- <img src="../img/dream-3.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- </div>
- <a href="" class="all-list-text">
- 《极光之恋》今晚24点首播
- </a>
- <span class="all-list-text color-999">
- 关晓彤"恋上"马可
- </span>
- </li>
- <li class="hot-list fl nomb">
- <div class="hot-list-img mb7 pr">
- <a href="">
- <img src="../img/dream-4.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- </div>
- <a href="" class="all-list-text">
- 两位大长腿美女跳C哩C哩
- </a>
- <span class="all-list-text color-999">
- 舞慢慢的清春活力
- </span>
- </li>
- <li class="hot-list fl nomb">
- <div class="hot-list-img mb7 pr">
- <a href="">
- <img src="../img/dream-5.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- </div>
- <a href="" class="all-list-text">
- 盘点长相吓人的"深海怪物"
- </a>
- <span class="all-list-text color-999">
- 面目狰狞头上长个灯
- </span>
- </li>
- <li class="hot-list fl nomr nomb">
- <div class="hot-list-img mb7 pr">
- <a href="">
- <img src="../img/dream-6.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- </div>
- <a href="" class="all-list-text">
- 迪士尼西点师住城中村
- </a>
- <span class="all-list-text color-999">
- 街头做公益献爱心
- </span>
- </li>
- </ul>
- </div>
- <!--强势接档-->
- <div class="recent mb39">
- <header class="recent-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">强势接档</a>
- </h3>
- <span class="sub-title-left color1 fl">
- 近期上架的精彩内容
- </span>
- </header>
- <div class="clearfix">
- <div class="recent-time pr fl">
- <div class="time1 wh">
- <div class="day">
- 上周五
- <div class="good bg"></div>
- </div>
- <div class="date color1">
- 12月1日首播
- </div>
- <div class="point"></div>
- </div>
- <div class="time2 wh">
- <div class="day">
- 本周五
- <div class="good bg"></div>
- </div>
- <div class="date color1">
- 12月8日首播
- </div>
- <div class="point">
- </div>
- </div>
- <div class="time3 wh">
- <div class="day">
- 下周一
- </div>
- <div class="date color1">
- 12月11日首播
- </div>
- <div class="point">
- </div>
- </div>
- <div class="time4 wh">
- <div class="day">
- 12月16日
- </div>
- <div class="date color1">
- 首播
- </div>
- <div class="point"></div>
- </div>
- <div class="time5 wh">
- <div class="day">
- 12月19日
- </div>
- <div class="date color1">
- 首播
- </div>
- <div class="point"></div>
- </div>
- <div class="time6 wh">
- <div class="day">
- 12月23日
- </div>
- <div class="date color1">
- 首播
- </div>
- <div class="point">
- </div>
- </div>
- <div class="time7 wh">
- <div class="day">
- 12月28日
- </div>
- <div class="date color1">
- 首播
- </div>
- <div class="point"></div>
- </div>
- </div>
- </div>
- <ul class="clearfix">
- <li class="recent-list list fl">
- <div class="recent-list-img pr mb7">
- <a href="">
- <img src="../img/recent-1.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 期待指数
- </span>
- <span class="expect-left-text">
- 86%
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 极光之恋
- </a>
- <span class="all-list-text color1">
- 国民闺女关晓彤恋...
- </span>
- <div class="add bg"></div>
- </li>
- <li class="recent-list list fl">
- <div class="recent-list-img pr mb7">
- <a href="">
- <img src="../img/recent-2.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 期待指数
- </span>
- <span class="expect-left-text">
- 86%
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 溏心风暴
- </a>
- <span class="all-list-text color1">
- 黄宗泽领衔再掀家
- </span>
- <div class="add bg"></div>
- </li>
- <li class="recent-list list fl">
- <div class="recent-list-img pr mb7">
- <a href="">
- <img src="../img/recent-3.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 期待指数
- </span>
- <span class="expect-left-text">
- 86%
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 教数学的体育老师
- </a>
- <span class="all-list-text color1">
- 中二数学老师迷之...
- </span>
- <div class="add bg"></div>
- </li>
- <li class="recent-list list fl">
- <div class="recent-list-img pr mb7">
- <a href="">
- <img src="../img/recent-4.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 期待指数
- </span>
- <span class="expect-left-text">
- 86%
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 我的妈呀
- </a>
- <span class="all-list-text color1">
- 影后鲍起静演绎乖...
- </span>
- <div class="add bg"></div>
- </li>
- <li class="recent-list list fl">
- <div class="recent-list-img pr mb7">
- <a href="">
- <img src="../img/recent-5.png"/>
- </a>
- <div class="bg-made bg"></div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 期待指数
- </span>
- <span class="expect-left-text">
- 86%
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 2017维密内衣大秀
- </a>
- <span class="all-list-text color1">
- 视觉盛宴即将来袭
- </span>
- <div class="add bg"></div>
- </li>
- <li class="recent-list list fl">
- <div class="recent-list-img pr mb7">
- <a href="">
- <img src="../img/recent-6.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 期待指数
- </span>
- <span class="expect-left-text">
- 86%
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 极请邮局光之恋
- </a>
- <span class="all-list-text color1">
- 命中注定嫁给你
- </span>
- <div class="add bg"></div>
- </li>
- <li class="recent-list list fl nomr">
- <div class="recent-list-img pr mb7">
- <a href="">
- <img src="../img/recent-7.png"/>
- </a>
- <div class="bg-prevue bg"></div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 期待指数
- </span>
- <span class="expect-left-text">
- 86%
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 王者出击
- </a>
- <span class="all-list-text color1">
- baby林志玲王者造型
- </span>
- <div class="add bg"></div>
- </li>
- </ul>
- </div>
- <!--排行榜-->
- <div class="rank h337 mb39">
- <header class="rank-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">排行榜</a>
- </h3>
- <a href="" class="sub-title bb fl">热播</a>
- <a href="" class="sub-title fl">内地</a>
- <a href="" class="sub-title fl">港台</a>
- <a href="" class="sub-title fl">美国</a>
- <a href="" class="sub-title fl">院线</a>
- <a href="" class="con-title-right-text fr">更多></a>
- </header>
- <ul class="clearfix">
- <li class="rank-list list fl">
- <div class="rank-list-img pr mb7">
- <a href="">
- <img src="../img/synch-1.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 播放量
- </span>
- <span class="expect-left-text">
- 1732.2万
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 极光之恋
- </a>
- <span class="all-list-text color1">
- 国民闺女关晓彤恋
- </span>
- <div class="list-number color2">1</div>
- </li>
- <li class="rank-list list fl">
- <div class="rank-list-img pr mb7">
- <a href="">
- <img src="../img/synch-2.png"/>
- </a>
- <div class="bg-number">
- 01:59:58
- </div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 播放量
- </span>
- <span class="expect-left-text">
- 1527.3万
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 溏心风暴
- </a>
- <span class="all-list-text color1">
- 黄宗泽领衔再掀家...
- </span>
- <div class="list-number color3">2</div>
- </li>
- <li class="rank-list list fl">
- <div class="rank-list-img pr mb7">
- <a href="">
- <img src="../img/synch-3.png"/>
- </a>
- <div class="bg-number">
- 01:36:52
- </div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 播放量
- </span>
- <span class="expect-left-text">
- 1324.7万
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 教数学的体育老师
- </a>
- <span class="all-list-text color1">
- 中二数学老师迷之
- </span>
- <div class="list-number color4">3</div>
- </li>
- <li class="rank-list list fl">
- <div class="rank-list-img pr mb7">
- <a href="">
- <img src="../img/synch-4.png"/>
- </a>
- <div class="bg-number">
- 02:18:57
- </div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 播放量
- </span>
- <span class="expect-left-text">
- 1000.1万
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 我的妈呀
- </a>
- <span class="all-list-text color1">
- 影后鲍起静演绎乖...
- </span>
- <div class="list-number">4</div>
- </li>
- <li class="rank-list list fl">
- <div class="rank-list-img pr mb7">
- <a href="">
- <img src="../img/synch-5.png"/>
- </a>
- <div class="bg-number">
- 01:55:04
- </div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 播放量
- </span>
- <span class="expect-left-text">
- 873.1万
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 2017维密内衣大秀
- </a>
- <span class="all-list-text color1">
- 视觉盛宴即将来袭
- </span>
- <div class="list-number">5</div>
- </li>
- <li class="rank-list list fl">
- <div class="rank-list-img pr mb7">
- <a href="">
- <img src="../img/synch-6.png"/>
- </a>
- <div class="bg-number">
- 01:47:06
- </div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 播放量
- </span>
- <span class="expect-left-text">
- 762.1万
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 极请邮局光之恋
- </a>
- <span class="all-list-text color1">
- 命中注定嫁给你
- </span>
- <div class="list-number">6</div>
- </li>
- <li class="rank-list list fl nomr">
- <div class="rank-list-img pr mb7">
- <a href="">
- <img src="../img/synch-7.png"/>
- </a>
- <div class="bg-number">
- 01:44:25
- </div>
- <div class="expect">
- <div class="expect-left fl">
- <span class="expect-left-text mb9">
- 播放量
- </span>
- <span class="expect-left-text">
- 666.2万
- </span>
- </div>
- <div class="expect-right fl">
- <div class="expect-right-top"></div>
- <div class="expect-right-hot"></div>
- </div>
- </div>
- </div>
- <a href="" class="all-list-text">
- 王者出击
- </a>
- <span class="all-list-text color1">
- baby林志玲王者造型
- </span>
- <div class="list-number">7</div>
- </li>
- </ul>
- </div>
- <!--特色专题-->
- <div class="topic mb39">
- <header class="topic-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">特色专题</a>
- </h3>
- <a href="" class="sub-title bb fl">周末宅影院</a>
- </header>
- <ul class="clearfix">
- <li class="topic-list fl">
- <div class="topic-list-img">
- <a href=""><img src="../img/topic-1.png"/></a>
- </div>
- <a href="" class="topic-list-text">走进DC电影宇宙专区</a>
- </li>
- <li class="topic-list fl">
- <div class="topic-list-img">
- <a href=""><img src="../img/topic-2.png"/></a>
- </div>
- <a href="" class="topic-list-text">皮克斯动画大赏</a>
- </li>
- <li class="topic-list fl">
- <div class="topic-list-img">
- <a href=""><img src="../img/topic-3.png"/></a>
- </div>
- <a href="" class="topic-list-text">原汁原味惊悚片大放送</a>
- </li>
- <li class="topic-list fl">
- <div class="topic-list-img">
- <a href=""><img src="../img/topic-4.png"/></a>
- </div>
- <a href="" class="topic-list-text">让人无法抗拒的古风美颜</a>
- </li>
- </ul>
- </div>
- <!--"十亿俱乐部"成员-->
- <div class="ten mb39">
- <header class="ten-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">"十亿俱乐部"成员</a>
- </h3>
- </header>
- <div class="ten-star clearfix">
- <a href="" class="fl bor-b">
- <span class="ten-star-img fl">
- <img src="../img/wujing.png"/>
- </span>
- <span class="ten-star-name fl">
- 吴京
- </span>
- </a>
- <a href="" class="fl">
- <span class="ten-star-img fl">
- <img src="../img/mali.png"/>
- </span>
- <span class="ten-star-name fl">
- 马丽
- </span>
- </a>
- <a href="" class="fl">
- <span class="ten-star-img fl">
- <img src="../img/ailun.png"/>
- </span>
- <span class="ten-star-name fl">
- 艾伦
- </span>
- </a>
- <a href="" class="fl">
- <span class="ten-star-img fl">
- <img src="../img/zhouxingchi.png"/>
- </span>
- <span class="ten-star-name fl">
- 周星驰
- </span>
- </a>
- <a href="" class="fl">
- <span class="ten-star-img fl">
- <img src="../img/huangbo.png"/>
- </span>
- <span class="ten-star-name fl">
- 黄渤
- </span>
- </a><a href="" class="fl">
- <span class="ten-star-img fl">
- <img src="../img/chenglong.png"/>
- </span>
- <span class="ten-star-name fl">
- 成龙
- </span>
- </a>
- </div>
- <ul class="clearfix">
- <li class="ten-list list fl">
- <div class="ten-list-img pr mb7">
- <a href="">
- <img src="../img/movie-1.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极光之恋
- </a>
- <span class="all-list-text color1">
- 国民闺女关晓彤恋
- </span>
- </li>
- <li class="ten-list list fl">
- <div class="ten-list-img pr mb7">
- <a href="">
- <img src="../img/movie-2.png"/>
- </a>
- <div class="bg-number">
- 01:59:58
- </div>
- </div>
- <a href="" class="all-list-text">
- 溏心风暴
- </a>
- <span class="all-list-text color1">
- 黄宗泽领衔再掀家...
- </span>
- </li>
- <li class="ten-list list fl">
- <div class="ten-list-img pr mb7">
- <a href="">
- <img src="../img/movie-3.png"/>
- </a>
- <div class="bg-number">
- 01:36:52
- </div>
- </div>
- <a href="" class="all-list-text">
- 教数学的体育老师
- </a>
- <span class="all-list-text color1">
- 中二数学老师迷之
- </span>
- </li>
- <li class="ten-list list fl">
- <div class="ten-list-img pr mb7">
- <a href="">
- <img src="../img/movie-4.png"/>
- </a>
- <div class="bg-number">
- 02:18:57
- </div>
- </div>
- <a href="" class="all-list-text">
- 我的妈呀
- </a>
- <span class="all-list-text color1">
- 影后鲍起静演绎乖
- </span>
- </li>
- <li class="ten-list list fl">
- <div class="ten-list-img pr mb7">
- <a href="">
- <img src="../img/movie-5.png"/>
- </a>
- <div class="bg-number">
- 01:55:04
- </div>
- </div>
- <a href="" class="all-list-text">
- 2017维密内衣大秀
- </a>
- <span class="all-list-text color1">
- 视觉盛宴即将来袭
- </span>
- </li>
- <li class="ten-list list fl">
- <div class="ten-list-img pr mb7">
- <a href="">
- <img src="../img/movie-6.png"/>
- </a>
- <div class="bg-number">
- 01:47:06
- </div>
- </div>
- <a href="" class="all-list-text">
- 极请邮局光之恋
- </a>
- <span class="all-list-text color1">
- 命中注定嫁给你
- </span>
- </li>
- <li class="ten-list list fl nomr">
- <div class="ten-list-img pr mb7">
- <a href="">
- <img src="../img/movie-7.png"/>
- </a>
- <div class="bg-number">
- 01:44:25
- </div>
- </div>
- <a href="" class="all-list-text">
- 王者出击
- </a>
- <span class="all-list-text color1">
- baby林志玲王者造型
- </span>
- </li>
- </ul>
- </div>
- <!--影集-->
- <ul class="movie-all clearfix mb39">
- <li class="movie-all-list fl pr">
- <a href="">
- <img src="../img/movie-all-1.png"/>
- </a>
- <div class="movie-all-first">
- <div class="movie-all-first-text1 w184">
- 你喜欢的同类影片统统在这里排队,一秒全看,省时省力
- </div>
- <a class="movie-all-first-text2 clearfix">
- <span class="movie-all-first-text2-change bg fl"></span>
- 换一换
- </a>
- </div>
- </li>
- <li class="movie-all-list nomb nomt fl pr">
- <a href="">
- <img src="../img/movie-all-2.png"/>
- </a>
- <div class="movie-all-list-text">
- <div class="movie-all-list-text1 w184">
- 2017年会员观看爆款电影都在这儿!
- </div>
- <div class="movie-all-list-text2">
- 爆款 2017
- </div>
- </div>
- </li>
- <li class="movie-all-list pr fl">
- <a href="">
- <img src="../img/movie-all-3.png"/>
- </a>
- <div class="movie-all-list-text">
- <div class="movie-all-list-text1">
- 成龙:真的还想再打20年
- </div>
- <div class="movie-all-list-text2">
- 成龙 功夫
- </div>
- </div>
- </li>
- <li class="movie-all-list pr fl">
- <a href="">
- <img src="../img/movie-all-4.png"/>
- </a>
- <div class="movie-all-list-text">
- <div class="movie-all-list-text1">
- 影后余男:身上的气质独一份儿
- </div>
- <div class="movie-all-list-text2">
- 余男 引爆者 战狼
- </div>
- </div>
- </li>
- <li class="movie-all-list pr fl">
- <a href="">
- <img src="../img/movie-all-5.png"/>
- </a>
- <div class="movie-all-list-text">
- <div class="movie-all-list-text1">
- 最萌年龄差:这些大叔不油腻
- </div>
- <div class="movie-all-list-text2">
- 大叔控 萝莉 电影
- </div>
- </div>
- </li>
- <li class="movie-all-list pr fl">
- <a href="">
- <img src="../img/movie-all-6.png"/>
- </a>
- <div class="movie-all-list-text">
- <div class="movie-all-list-text1">
- 空中英豪热血集结献上经典空战对决
- </div>
- <div class="movie-all-list-text2">
- 空战 战争 空天猎
- </div>
- </div>
- </li>
- <li class="movie-all-list pr fl">
- <a href="">
- <img src="../img/movie-all-7.png"/>
- </a>
- <div class="movie-all-list-text">
- <div class="movie-all-list-text1">
- 解压神片 笑到劈叉爆笑喜剧疯不停
- </div>
- <div class="movie-all-list-text2">
- 喜剧 夏洛特烦恼
- </div>
- </div>
- </li>
- </ul>
- <!--青春偶像-->
- <div class="young mb39">
- <header class="young-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">
- <span class="fl">
- 青春偶像·爱情
- </span>
- 相关电影
- </a>
- </h3>
- <span class="sub-title-left color1 fl">
- 猜你喜欢
- </span>
- <a href="" class="con-title-right-text fr">更多></a>
- </header>
- <ul class="clearfix">
- <li class="young-list list fl">
- <div class="young-list-img pr mb7">
- <a href="">
- <img src="../img/baa-1.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极光之恋
- </a>
- <span class="all-list-text color1">
- 国民闺女关晓彤恋...
- </span>
- </li>
- <li class="young-list list fl">
- <div class="young-list-img pr mb7">
- <a href="">
- <img src="../img/baa-2.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 溏心风暴
- </a>
- <span class="all-list-text color1">
- 黄宗泽领衔再掀家
- </span>
- </li>
- <li class="young-list list fl">
- <div class="young-list-img pr mb7">
- <a href="">
- <img src="../img/baa-3.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 教数学的体育老师
- </a>
- <span class="all-list-text color1">
- 中二数学老师迷之...
- </span>
- </li>
- <li class="young-list list fl">
- <div class="young-list-img pr mb7">
- <a href="">
- <img src="../img/baa-4.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 我的妈呀
- </a>
- <span class="all-list-text color1">
- 影后鲍起静演绎乖...
- </span>
- </li>
- <li class="young-list list fl">
- <div class="young-list-img pr mb7">
- <a href="">
- <img src="../img/baa-5.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 2017维密内衣大秀
- </a>
- <span class="all-list-text color1">
- 视觉盛宴即将来袭
- </span>
- </li>
- <li class="young-list list fl">
- <div class="young-list-img pr mb7">
- <a href="">
- <img src="../img/baa-6.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极请邮局光之恋
- </a>
- <span class="all-list-text color1">
- 命中注定嫁给你
- </span>
- </li>
- <li class="young-list list fl nomr">
- <div class="young-list-img pr mb7">
- <a href="">
- <img src="../img/baa-7.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 王者出击
- </a>
- <span class="all-list-text color1">
- baby林志玲王者造型
- </span>
- </li>
- </ul>
- </div>
- <!--名著改编-->
- <div class="adapt mb39">
- <header class="adapt-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">
- <span class="fl">
- 名著改编·喜剧
- </span>
- 相关电影
- </a>
- </h3>
- <span class="sub-title-left color1 fl">
- 猜你喜欢
- </span>
- <a href="" class="con-title-right-text fr">更多></a>
- </header>
- <ul class="clearfix">
- <li class="adapt-list list fl">
- <div class="adapt-list-img pr mb7">
- <a href="">
- <img src="../img/korea-1.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极光之恋
- </a>
- <span class="all-list-text color1">
- 国民闺女关晓彤恋...
- </span>
- </li>
- <li class="adapt-list list fl">
- <div class="adapt-list-img pr mb7">
- <a href="">
- <img src="../img/korea-2.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 溏心风暴
- </a>
- <span class="all-list-text color1">
- 黄宗泽领衔再掀家
- </span>
- </li>
- <li class="adapt-list list fl">
- <div class="adapt-list-img pr mb7">
- <a href="">
- <img src="../img/korea-3.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 教数学的体育老师
- </a>
- <span class="all-list-text color1">
- 中二数学老师迷之...
- </span>
- </li>
- <li class="adapt-list list fl">
- <div class="adapt-list-img pr mb7">
- <a href="">
- <img src="../img/korea-4.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 我的妈呀
- </a>
- <span class="all-list-text color1">
- 影后鲍起静演绎乖...
- </span>
- </li>
- <li class="adapt-list list fl">
- <div class="adapt-list-img pr mb7">
- <a href="">
- <img src="../img/korea-5.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 2017维密内衣大秀
- </a>
- <span class="all-list-text color1">
- 视觉盛宴即将来袭
- </span>
- </li>
- <li class="adapt-list list fl">
- <div class="adapt-list-img pr mb7">
- <a href="">
- <img src="../img/korea-6.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极请邮局光之恋
- </a>
- <span class="all-list-text color1">
- 命中注定嫁给你
- </span>
- </li>
- <li class="adapt-list list fl nomr">
- <div class="adapt-list-img pr mb7">
- <a href="">
- <img src="../img/korea-7.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 王者出击
- </a>
- <span class="all-list-text color1">
- baby林志玲王者造型
- </span>
- </li>
- </ul>
- </div>
- <!--动作片-->
- <div class="action mb39">
- <header class="action-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">
- <span class="fl">
- 政治博弈·动作
- </span>
- 相关电影
- </a>
- </h3>
- <span class="sub-title-left color1 fl">
- 猜你喜欢
- </span>
- <a href="" class="con-title-right-text fr">更多></a>
- </header>
- <ul class="clearfix">
- <li class="action-list list fl">
- <div class="action-list-img pr mb7">
- <a href="">
- <img src="../img/cartoon-1.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极光之恋
- </a>
- <span class="all-list-text color1">
- 国民闺女关晓彤恋...
- </span>
- </li>
- <li class="action-list list fl">
- <div class="action-list-img pr mb7">
- <a href="">
- <img src="../img/cartoon-2.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 溏心风暴
- </a>
- <span class="all-list-text color1">
- 黄宗泽领衔再掀家
- </span>
- </li>
- <li class="action-list list fl">
- <div class="action-list-img pr mb7">
- <a href="">
- <img src="../img/cartoon-3.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 教数学的体育老师
- </a>
- <span class="all-list-text color1">
- 中二数学老师迷之...
- </span>
- </li>
- <li class="action-list list fl">
- <div class="action-list-img pr mb7">
- <a href="">
- <img src="../img/cartoon-4.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 我的妈呀
- </a>
- <span class="all-list-text color1">
- 影后鲍起静演绎乖...
- </span>
- </li>
- <li class="action-list list fl">
- <div class="action-list-img pr mb7">
- <a href="">
- <img src="../img/cartoon-5.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 2017维密内衣大秀
- </a>
- <span class="all-list-text color1">
- 视觉盛宴即将来袭
- </span>
- </li>
- <li class="action-list list fl">
- <div class="action-list-img pr mb7">
- <a href="">
- <img src="../img/cartoon-6.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极请邮局光之恋
- </a>
- <span class="all-list-text color1">
- 命中注定嫁给你
- </span>
- </li>
- <li class="action-list list fl nomr">
- <div class="action-list-img pr mb7">
- <a href="">
- <img src="../img/cartoon-7.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 王者出击
- </a>
- <span class="all-list-text color1">
- baby林志玲王者造型
- </span>
- </li>
- </ul>
- </div>
- <!--惊悚片-->
- <div class="action mb39">
- <header class="action-head clearfix">
- <h3 class="con-title fl">
- <a href="" class="con-title-text fl">
- <span class="fl">
- 惊悚·值得重看
- </span>
- 相关电影
- </a>
- </h3>
- <span class="sub-title-left color1 fl">
- 猜你喜欢
- </span>
- <a href="" class="con-title-right-text fr">更多></a>
- </header>
- <ul class="clearfix">
- <li class="scare-list list fl">
- <div class="scare-list-img pr mb7">
- <a href="">
- <img src="../img/child-1.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极光之恋
- </a>
- <span class="all-list-text color1">
- 国民闺女关晓彤恋...
- </span>
- </li>
- <li class="scare-list list fl">
- <div class="scare-list-img pr mb7">
- <a href="">
- <img src="../img/child-2.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 溏心风暴
- </a>
- <span class="all-list-text color1">
- 黄宗泽领衔再掀家
- </span>
- </li>
- <li class="scare-list list fl">
- <div class="scare-list-img pr mb7">
- <a href="">
- <img src="../img/child-3.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 教数学的体育老师
- </a>
- <span class="all-list-text color1">
- 中二数学老师迷之...
- </span>
- </li>
- <li class="scare-list list fl">
- <div class="scare-list-img pr mb7">
- <a href="">
- <img src="../img/child-4.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 我的妈呀
- </a>
- <span class="all-list-text color1">
- 影后鲍起静演绎乖...
- </span>
- </li>
- <li class="scare-list list fl">
- <div class="scare-list-img pr mb7">
- <a href="">
- <img src="../img/child-5.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 2017维密内衣大秀
- </a>
- <span class="all-list-text color1">
- 视觉盛宴即将来袭
- </span>
- </li>
- <li class="scare-list list fl">
- <div class="scare-list-img pr mb7">
- <a href="">
- <img src="../img/child-6.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 极请邮局光之恋
- </a>
- <span class="all-list-text color1">
- 命中注定嫁给你
- </span>
- </li>
- <li class="scare-list list fl nomr">
- <div class="scare-list-img pr mb7">
- <a href="">
- <img src="../img/child-7.png"/>
- </a>
- <div class="bg-number">
- 01:52:15
- </div>
- </div>
- <a href="" class="all-list-text">
- 王者出击
- </a>
- <span class="all-list-text color1">
- baby林志玲王者造型
- </span>
- </li>
- </ul>
- </div>
- <!--链接-->
- <div class="link">
- <ul class="link-content">
- <li class="fl">
- <a href="" class="fl mr10">
- <img src="../img/link-1.png"/>
- </a>
- <div class="lc-list-right mt16 fl">
- <a href="" class="all-list-text lh20">腾讯电影官方微博</a>
- <span class="all-list-text lh20 color1">看最热门的电影,抢热映电影票!</span>
- </div>
- </li>
- <li class="lc-list fl">
- <form action="" >
- <input class="link-submit" type="submit" value="立即收听"/>
- </form>
- </li>
- <li class="fr">
- <a href="" class="fl mr10">
- <img src="../img/link-2.png"/>
- </a>
- <div class="lc-list-right mt16 fl">
- <a href="" class="all-list-text lh20">腾讯视频电影官方微信账号</a>
- <span class="all-list-text lh20 color1">一言不合就发福利的电影官号</span>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <!--底部区域footer.foot-->
- <footer class="foot">
- <div class="foot-top clearfix">
- <div class="top-hot h226 fl">
- <h3>
- 热门频道
- </h3>
- <div class="clearfix">
- <div class="w70 fl">
- <a href="">电视剧</a>
- <a href="">娱乐</a>
- <a href="">游戏</a>
- <a href="">记录片</a>
- <a href="">生活</a>
- </div>
- <div class="w70 fl">
- <a href="">综艺</a>
- <a href="">MV</a>
- <a href="">VIP影院</a>
- <a href="">新闻</a>
- </div>
- <div class="w70 fl">
- <a href="">电影</a>
- <a href="">动漫</a>
- <a href="">英美剧</a>
- <a href="">体育</a>
- </div>
- </div>
- </div>
- <div class="top-rec h226 fl">
- <h3>
- 特色推荐
- </h3>
- <div class="">
- <a href="">原创自媒体</a>
- <a href="">微电影</a>
- <a href="">拍客</a>
- <a href="">搞笑</a>
- </div>
- </div>
- <div class="top-download h226 fl">
- <h3>
- 软件下载
- </h3>
- <div class="clearfix">
- <a href="" class="fl">
- <span class="bg phone"></span>
- 手机版
- </a>
- <a href="" class="fl">
- <span class="bg windows"></span>
- windows版
- </a>
- <a href="" class="fl">
- <span class="bg mac"></span>
- MAC版
- </a>
- <a href="" class="fl">
- <span class="bg ipad"></span>
- iPad版
- </a>
- <a href="" class="fl">
- <span class="bg tv"></span>
- TV版
- </a>
- </div>
- </div>
- <div class="top-service h226 fl">
- <h3>
- 服务
- </h3>
- <div class="">
- <a href="">客服</a>
- <a href="">反馈</a>
- <a href="">投诉</a>
- <a href="">免广告合作</a>
- </div>
- </div>
- </div>
- <div class="foot-bottom">
- <div class="bottom-top">
- <a href="" class="top-text">
- 关于腾讯
- </a>
- <a href="" class="top-text">
- About Tencent
- </a>
- <a href="" class="top-text">
- 服务条款
- </a>
- <a href="" class="top-text">
- 广告服务
- </a>
- <a href="" class="top-text">
- 腾讯招聘
- </a>
- <a href="" class="top-text">
- 客服中心
- </a>
- <a href="" class="top-text nopd nobr nomr">
- 网站导航
- </a>
- </div>
- <div class="bottom-middle">
- Copyright © 1998-2017 Tencent All Rights Reserved.
- </div>
- <div class="bottom-bottom">
- <span class="">
- 腾讯公司
- </span>
- <span class="">
- 版权所有
- </span>
- <span class="">
- 腾讯网络文化经营许可证
- </span>
- </div>
- </div>
- </footer>
- <div class="fix">
- <a href="" class="fix-v bg"></a>
- <a href="" class="fix-i bg"></a>
- <a href="" class="fix-d bg"></a>
- <a href="" class="fix-t bg"></a>
- </div>
- </section>
- </body>
- </html>
- <!--
- 伪代码
- 模块容器section#box
- 我的节目单div.mylist
- 头部区域header.head
- 内容区域div.content
- 底部区域footer.foot
- -->
来源: http://www.qdfuns.com/notes/48008/701ffb379e60856d2fb83e66b3dc4f30.html