整个看起来不是很复杂 但是header banner部分的细节比较多 多层div需要设置z-index 固定窗口的值肯定最大
下面的照片墙 开始是想弹性布局 除了一些问题 最后 用了左右结构 再慢慢调节高度 让两边高度
对齐 花了不少时间 应该可以使用其他方法提高效率
评论没什么 回复的消息框 比较单一 定位右边单独的点赞标志即可
右边一列 小样式很多 大的样式 都一样 注意使用vertical-align 行盒的对齐方式
整个网页宽度都是百分比
高度按照设计稿量
具体还是需要自己调试
header和 footer 都是写的单独的css文件 只需要引入即可
/* header*//* header*//* header*//* header*/
/* header*//* header*//* header*//* header*/
/* header*//* header*//* header*//* header*/
header {
z-index: 999;
position: fixed;
top: 0;
left: 0;
background-color: white;
width: 100%;
min-width: 1300px;
height: 80px;
border: 1px solid #999999;
}
header img {
float: left;
margin-top: 20px;
margin-left: 18%;
margin-right: 1%;
}
header form {
position: relative;
margin: 0;
display: inline-block;
vertical-align: top;
}
header form select {
height: 75px;
margin: 0;
border: none;
}
header form input {
border: 1px solid #999999;
border-radius: 50px;
width: 100%;
height: 40px;
margin-top: 20px;
text-indent: 1em;
margin-left: 50%;
}
header form img {
position: absolute;
top: 2px;
left: 110%;
width: 40px;
height: 40px;
object-fit: cover;
}
header div {
width: 16%;
height: 80px;
display: inline-block;
margin-left: 40px;
}
header div .a1, header div .a2, header div .a3, header div .a4 {
width: 25%;
height: 80px;
float: left;
text-align: center;
line-height: 80px;
color: #333333;
}
header div .a1:hover, header div .a2:hover, header div .a3:hover, header div .a4:hover {
background-color: #ef4238;
color: white;
}
/* header div .a1 {
background-color: #ef4238;
color: white;
} */
header .login {
position: relative;
}
header .login .login1 {
position: absolute;
top: 20px;
left: 0px;
width: 45px;
height: 45px;
margin: 0;
margin-left: 50%;
}
/*# sourceMappingURL=MY-Info.css.map */
/*# sourceMappingURL=MY-Info.css.map */
/*# sourceMappingURL=MY-Info.css.map */
/*# sourceMappingURL=MY-Info.css.map */
/*# sourceMappingURL=MY-Info.css.map */
a {
text-decoration: none; }
ul {
list-style: none; }
footer {
height: 155px;
width: 100%;
background-color: #262426; }
footer p {
color: #999999;
text-align: center;
padding-top: 30px; }
.banner {
margin-top: 80px;
position: relative;
width: 100%;
min-width: 960px;
height: 376px;
background-image: url(../pc/img/banner_bg.f7fd103e3b8c16b6f449cce43fc57f45.png);
background-size: cover;
background-repeat: no-repeat; }
.banner .poster-shadow {
position: relative;
top: 70px;
left: 20%;
z-index: 666;
display: inline-block;
margin: 0 30px;
width: 240px;
height: 330px;
padding-bottom: 40px; }
.banner .poster-shadow img {
border: 4px solid white; }
.banner .banner-info {
width: 40%;
min-width: 550px;
height: 290px;
position: absolute;
top: 0px;
right: 15%;
margin-right: 30px;
margin-left: 300px;
margin-top: 70px; }
.banner .banner-info .name {
font-size: 26px;
color: white;
margin: 25px 0 10px; }
.banner .banner-info .eng-name {
width: 340px;
height: 23px;
margin-bottom: 14px;
color: white; }
.banner .banner-info ul {
width: 250px;
list-style: none;
padding-left: 0;
margin-bottom: 20px;
padding: 0;
line-height: 1; }
.banner .banner-info ul li {
font-size: 14px;
margin: 12px 0;
color: white; }
.banner .banner-info .action-buy-but {
position: relative; }
.banner .banner-info .action-buy-but .wish {
cursor: pointer;
float: left;
display: block;
width: 120px;
height: 25px;
background-color: #756189;
margin-right: 10px;
padding-top: 11px;
text-align: center;
font-size: 14px;
line-height: 16px;
color: #fff;
border-radius: 2px; }
.banner .banner-info .action-buy-but .wish span {
vertical-align: top; }
.banner .banner-info .action-buy-but .evalu {
cursor: pointer;
float: left;
display: block;
width: 120px;
height: 25px;
background-color: #756189;
margin-right: 10px;
padding-top: 11px;
text-align: center;
font-size: 14px;
line-height: 16px;
color: #fff;
border-radius: 2px; }
.banner .banner-info .action-buy-but .evalu span {
vertical-align: top; }
.banner .banner-info .action-buy-but .buy {
margin-top: 10px;
width: 250px;
height: 40px;
font-size: 16px;
line-height: 40px;
text-align: center;
border-radius: 2px;
padding: 0;
color: #fff;
background-color: #df2d2d;
position: absolute;
top: 35px;
left: 0; }
.banner .banner-info .movie-star {
position: absolute;
top: 138px;
left: 342px;
width: 135px;
height: 144px; }
.banner .banner-info .movie-star .ms-1 {
font-size: 12px;
margin-bottom: 8px;
width: 135px;
height: 12px;
color: white; }
.banner .banner-info .movie-star .movie-index {
height: 32px;
width: 135px; }
.banner .banner-info .movie-star .movie-index .mi-num {
position: relative; }
.banner .banner-info .movie-star .movie-index .mi-num .mi-num-1 {
font-size: 30px;
color: #ffb400; }
.banner .banner-info .movie-star .movie-index .mi-num img {
width: 65px;
height: 12px;
float: right;
margin-right: 10px; }
.banner .banner-info .movie-star .movie-index .mi-num .mi-num-2 {
font-size: 12px;
color: white;
position: absolute;
bottom: 2px;
right: 2px; }
.banner .banner-info .movie-star .ms-2 {
font-size: 12px;
margin: 15px 0;
width: 135px;
height: 12px;
color: white; }
.banner .banner-info .movie-star .ms-3 {
font-size: 30px;
color: white; }
.banner .banner-info .movie-star .ms-4 {
font-size: 12px;
padding-left: 4px;
color: white; }
section {
width: 64%;
margin: -30px auto 0;
border: solid transparent;
position: relative;
z-index: 199;
background-color: white; }
section .content {
width: 100%;
margin-top: 110px;
display: flex;
justify-content: space-between; }
section .content .con-left {
width: 65%; }
section .content .con-left .tab-title {
width: 100%;
height: 28px;
border-bottom: 2px solid #eee; }
section .content .con-left .tab-title .tab-title-active {
float: left;
font-size: 18px;
margin-right: 30px;
margin-bottom: -2px;
padding-bottom: 10px;
font-size: 18px;
color: #333;
line-height: 100%;
color: #ef4238;
border-bottom: 2px solid transparent;
border-bottom-color: #ef4238; }
section .content .con-left .tab-title .tab-title-normal {
float: left;
font-size: 18px;
margin-right: 30px;
margin-bottom: -2px;
padding-bottom: 10px;
font-size: 18px;
color: #333;
line-height: 100%;
border-bottom: 2px solid transparent; }
section .content .con-left .module {
margin-bottom: 60px;
width: 100%; }
section .content .con-left .module .mod-title {
margin-top: 40px; }
section .content .con-left .module .mod-title h3 {
display: inline-block;
margin: 0;
padding: 0;
font-weight: 400;
font-size: 18px;
color: #333;
line-height: 18px; }
section .content .con-left .module .mod-title h3:before {
float: left;
content: "";
width: 4px;
height: 18px;
margin-right: 6px;
background-color: #ef4238; }
section .content .con-left .module .mod-title a {
float: right;
color: #333333;
font-size: 14px;
margin-top: 3px; }
section .content .con-left .module .mod-content {
margin-top: 20px;
color: #333333; }
section .content .con-left .module .mod-content span {
font-size: 14px;
line-height: 26px; }
section .content .con-left .module .mod-content .actor1 {
width: 18%;
height: 200px;
float: left;
object-fit: cover; }
section .content .con-left .module .mod-content .actor1 .actor1-1 {
margin-bottom: 20px; }
section .content .con-left .module .mod-content .actor1 img {
width: 100%;
object-fit: cover; }
section .content .con-left .module .mod-content .actor1 p {
text-align: center;
margin-top: 12px; }
section .content .con-left .module .mod-content .actor2 {
width: 78%;
height: 242px;
margin-left: 1%;
float: left; }
section .content .con-left .module .mod-content .actor2 .actor2-1 {
margin-bottom: 18px; }
section .content .con-left .module .mod-content .actor2 .actor2-2 .actor2-2-1 {
width: 23%;
float: left;
margin-right: 1.5%;
height: 180px; }
section .content .con-left .module .mod-content .actor2 .actor2-2 .actor2-2-1 img {
width: 100%;
object-fit: cover; }
section .content .con-left .module .mod-content .actor2 .actor2-2 .actor2-2-1 .name1 {
text-align: center;
margin-top: 12px; }
section .content .con-left .module .mod-content .actor2 .actor2-2 .actor2-2-1 .m-name {
text-align: center;
color: #999999;
margin-top: 4px;
font-size: 14px; }
section .content .con-left .module3 {
width: 99%;
height: 306px;
margin-top: 280px; }
section .content .con-left .module3 .mod-title3 h3 {
display: inline-block;
margin: 0;
padding: 0;
font-weight: 400;
font-size: 18px;
color: #333;
line-height: 18px; }
section .content .con-left .module3 .mod-title3 h3:before {
float: left;
content: "";
width: 4px;
height: 18px;
margin-right: 6px;
background-color: #ef4238; }
section .content .con-left .module3 .mod-title3 a {
float: right;
font-size: 14px;
color: #333333;
margin-top: 3px; }
section .content .con-left .module3 .mod-content3 {
width: 100%;
height: 200px;
margin-top: 20px; }
section .content .con-left .module3 .mod-content3 .bigimg {
width: 63%;
object-fit: contain;
float: left; }
section .content .con-left .module3 .mod-content3 .littleimg {
float: left;
width: 17%;
margin-left: 5px;
margin-bottom: 5px;
object-fit: contain; }
section .content .con-left .module4 {
width: 99%;
position: relative; }
section .content .con-left .module4 .mod-title4 h3 {
display: inline-block;
margin: 0;
padding: 0;
font-weight: 400;
font-size: 18px;
color: #333;
line-height: 18px; }
section .content .con-left .module4 .mod-title4 h3:before {
float: left;
content: "";
width: 4px;
height: 18px;
margin-right: 6px;
background-color: #ef4238; }
section .content .con-left .module4 .mod-title4 a {
position: absolute;
top: -10px;
right: 0;
display: block;
height: 30px;
padding: 0 10px;
border-radius: 15px;
border: 1px solid #ef4238;
text-align: center;
font-size: 14px;
line-height: 30px;
color: #ef4238; }
section .content .con-left .module4 .comment-container {
width: 99%;
margin-top: 20px;
position: relative; }
section .content .con-left .module4 .comment-container .main {
width: 87%;
margin-left: 13%; }
section .content .con-left .module4 .comment-container .main .user {
margin-top: 2px;
font-size: 16px; }
section .content .con-left .module4 .comment-container .main .dianzan {
position: absolute;
top: 16px;
right: 0; }
section .content .con-left .module4 .comment-container .main .time {
margin-top: 4px;
color: #999; }
section .content .con-left .module4 .comment-container .main .comment-content {
margin-top: 20px;
padding-bottom: 30px;
border-bottom: 1px solid #e5e5e5;
color: #666;
line-height: 26px;
font-size: 14px; }
section .content .con-left .module4 .comment-container .user-tx {
float: left; }
section .content .con-left .module4 .comment-container .VIP2 {
position: absolute;
top: 30px;
left: 30px; }
section .content .con-right {
width: 32%;
height: 900px;
position: relative; }
section .content .con-right .ri-box1 {
width: 100%;
margin-bottom: 60px; }
section .content .con-right .ri-box1 h3 {
display: inline-block;
margin: 0;
padding: 0;
font-weight: 400;
font-size: 18px;
color: #333;
line-height: 18px; }
section .content .con-right .ri-box1 h3:before {
float: left;
content: "";
width: 4px;
height: 18px;
margin-right: 6px;
background-color: #ef4238; }
section .content .con-right .ri-box1 .news-item {
margin-top: 20px; }
section .content .con-right .ri-box1 .news-item .poster {
width: 40%;
object-fit: contain;
float: left;
margin-right: 5px; }
section .content .con-right .ri-box1 .news-item a {
font-size: 12px;
color: #333333; }
section .content .con-right .ri-box1 .news-item p {
vertical-align: middle;
margin-top: 15px;
font-size: 12px;
color: #999999;
margin-bottom: 5px; }
section .content .con-right .ri-box1 .movie-list {
margin-top: 20px;
width: 99%;
height: 330px;
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
section .content .con-right .ri-box1 .movie-list div {
width: 29%;
height: 150px; }
section .content .con-right .ri-box1 .movie-list div img {
width: 100%;
object-fit: cover; }
section .content .con-right .ri-box1 .movie-list div p {
font-size: 14px;
text-align: center; }
section .content .con-right .ri-box1 .movie-list div i {
display: inline-block;
width: 100%;
font-style: italic;
text-align: center;
font-size: 18px;
color: #ffb400; }
section .content .con-right .ri-box1 .movie-list div i span {
font-size: 14px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/MY-Info.css"> <title>湄公河行动 - 猫眼电影 - 一网打尽好电影</title> </head> <body> <header> <img src="./pc/img/logo_s.png" alt=""> <form action=""> <select name="" id=""> <option value="CD">成都</option> </select> </form> <div> <a class="a1" href="MY-homepage.html">首页</a> <a class="a2" href="MY-movie.html">电影</a> <a class="a3" href="MY-list.html">榜单</a> <a class="a4" href="">热点</a> </div> <form action=""> <input type="text" placeholder="找影视剧、影人、影院"> <img src="./IMG/search.png" alt=""> </form> <div class="login"> <a href="MY-login.html"> <img class="login1" src="./IMG/login.png" alt=""> </a> </div> </header> <div class="banner"> <div class="poster-shadow"> <img src="./IMG/details_meigonghe_03.jpg" alt=""> </div> <div class="banner-info"> <h3 class="name">湄公河行动</h3> <div class="eng-name">Operation Mekong</div> <ul> <li>动作，犯罪，剧情</li> <li>中国大陆，中国香港 / 124分钟</li> <li>2016-09-30大陆上映</li> </ul> <div class="action-buy-but"> <a href="" class="wish"> <div> <img src="./pc/img/banner_icon01.png" alt=""> <span>想看</span> </div> </a> <a href="" class="evalu"> <img src="./pc/img/banner_icon02.png" alt=""> <span>评分</span> </a> <a href="" class="buy"> <span>特惠购票</span> </a> </div> <div class="movie-star"> <p class="ms-1">用户评分</p> <div class="movie-index"> <div class="mi-num"> <span class="mi-num-1">9.0</span> <img src="./pc/img/star_icon02.png" alt=""> <span class="mi-num-2">58.6万人评分</span> </div> </div> <p class="ms-2">累计票房</p> <span class="ms-3">12.95</span> <span class="ms-4">亿</span> </div> </div> </div> <section> <div class="content"> <div class="con-left"> <div class="tab-title"> <div class="tab-title-active"> 介绍 </div> <div class="tab-title-normal"> 演职人员 </div> <div class="tab-title-normal"> 奖项 </div> <div class="tab-title-normal"> 图集 </div> </div> <div class="module"> <div class="mod-title"> <h3>介绍</h3> <a href="">全部》</a> </div> <div class="mod-content"> <span> 2011年10月5日，两艘中国商船在湄公河金三角水域遭遇袭击，13名中国船员全部遇难，泰国警方从船上搜出90万颗冰毒。消息传回国内，举国震惊。为了查明真相，云南缉毒总队长高刚（张涵予 饰）接受了特殊任务，率领一支骁勇善战的战斗小组进入泰国境内，与潜伏在泰国的情报员方新武（彭于晏 饰）碰头，二人联手深入金三角查案。经过调查，发现案件背后果然有着重重疑点，真正的凶手在嫁祸残害无辜中国船员后，不但逍遥法外，更意图利用毒品制造更大的阴谋……二人决定，不惜一切代价也要拿下真凶，打击毒品犯罪，为无辜国人讨回公道！ </span> </div> </div> <div class="module"> <div class="mod-title"> <h3>演职人员</h3> <a href="">全部》</a> </div> <div class="mod-content"> <div class="actor1"> <div class="actor1-1"> 导演 </div> <img src="./IMG/details_fengxiaogang_07.jpg" alt=""> <p>林超贤</p> </div> <div class="actor2"> <div class="actor2-1">演员</div> <div class="actor2-2"> <div class="actor2-2-1"> <img src="./IMG/details_zhanghanyu_09.jpg" alt=""> <p class="name1">张涵予</p> <p class="m-name">饰 ：高刚</p> </div> <div class="actor2-2-1"> <img src="./IMG/details_pengyuyan_11.jpg" alt=""> <p class="name1">彭于晏</p> <p class="m-name">饰 ：方新武</p> </div> <div class="actor2-2-1"> <img src="./IMG/details_fengwenjuan_13.jpg" alt=""> <p class="name1">冯文娟</p> <p class="m-name">饰 ：郭冰</p> </div> <div class="actor2-2-1"> <img src="./IMG/details_wuxudong_15.jpg" alt=""> <p class="name1">吴旭东</p> <p class="m-name">饰 ：特警队长</p> </div> </div> </div> </div> </div> <div class="module3"> <div class="mod-title3"> <h3>图集</h3> <a href="">全部》</a> </div> <div class="mod-content3"> <img class="bigimg" src="./IMG/details_gallery1_22.jpg" alt=""> <img class="littleimg" src="./IMG/details_gallery2_24.jpg" alt=""> <img class="littleimg" src="./IMG/details_gallery3_26.jpg" alt=""> <img class="littleimg" src="./IMG/details_gallery4_30.jpg" alt=""> <img class="littleimg" src="./IMG/details_gallery5_31.jpg" alt=""> </div> </div> <div class="module4"> <div class="mod-title4"> <h3>热门短评</h3> <a href="">写短评</a> </div> <ul> <li class="comment-container"> <img class="user-tx" src="./IMG/details_guest.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 如果不是真的期待，是不会大半夜的去看首映，根据真实事件的改编，让我了解到了当初湄公河案的背后，枪林弹雨，生死线上的徘徊，人性的挣扎不是简单几句结论和书面文字所能表达的；留一分不给是因为后边的英雄主义，以及结尾的仓促，而高刚回忆与方新武的一段话，让我总以为方是要留在金三角，他还活着 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head01.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 绝对的满分 特效 场景 高科技设备完全不输给好莱坞大片 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head02.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 这部影片总的来说，是挺不错的，枪战部分很精彩，就是方新武的内心戏感觉还不是很到位，湄公河行动就是我们中国国家强大影响力的体现，也用这次行动祭奠了惨死在湄公河的十三名中国同胞，有你们这群奋战在一线的缉毒警察为祖国和人民做出的牺牲和贡献。才有我们现在远离毒品的幸福安康的生活。 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head03.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 电影总体看来有打斗，有温情，有笑点，也有一些思考比如童子军。因为之前看过电视剧版的关系，一边在看一边与电视剧版的进度进行比较，可能会影响对电影的理解。但总体来说，个人认为电视剧版更好。剧情铺垫够，展开的够庞大而且对于其中的国家情怀渲染更有力。相比之下，电影版就单薄多了，更多时候是张涵予和彭于晏的个人秀和小组秀。而其作为一个现实改编，显然是不现实的，导演对于这个度的把握还有欠缺，不得不说，剧情线是很单薄的，电视剧虽然长但其不失吸引力，就这点来说，差的多了。导演应该是港台吧，对于那种家国情怀还是不够，差很多。其实想说是烂片，但现在的环境里，算合格吧。哦，对了，看完电影脑子里一直回想的是直升机直升机 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head04.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 很不错，看的惊心动魄，张涵予特男子汉，留胡子的彭于晏太酷了 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head05.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 国产良心大作，不枉费我来看首映。视角很新，让我见识到了真正意义上的中国精神，中国式Team work，中国式敢死队。很热血，就冲演员们爆炸的演技，我给满分。 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head06.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 虽然场面跟敢死队美国商业片有差距，但是体现的价值是炮火乱飞的商业片所没有的，它彰显了打击犯罪的决心， 展现了国家是人民利益的强有力保障，让民众深刻体会到了社会稳定的重要性，同时展示了中国对于外敌的态度 不仅是“抗议，谴责”，必要时定会亮出利剑。至少它体现的正义价值远超《动画片爵迹》 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head07.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 这部影片总的来说，是挺不错的，枪战部分很精彩，就是方新武的内心戏感觉还不是很到位，湄公河行动就是 我们中国国家强大影响力的体现，也用这次行动祭奠了惨死在湄公河的十三名中国同胞，有你们这群 奋战在一线的缉毒警察为祖国和人民做出的牺牲和贡献。才有我们现在远离毒品的幸福安康的生活 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head08.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 12点的首映，超了10分钟还没开始，万达太恶心了 </div> </div> </li> <li class="comment-container"> <img class="user-tx" src="./IMG/head09.png" alt=""> <img class="VIP2" src="./pc/img/v2.png" alt=""> <div class="main"> <div class="user"> yufujin </div> <div class="dianzan"> <img src="./pc/img/icon_06.png" alt=""> <span>3001</span> </div> <div class="time"> 09-30 <img src="./pc/img/star_icon02.png" alt=""> </div> <div class="comment-content"> 很好看，看了才知道真实故事改编的，如果是3D更好 </div> </div> </li> </ul> </div> </div> <div class="con-right"> <div class="ri-box1"> <h3>相关资讯</h3> <div class="news-item"> <img class="poster" src="./IMG/details_ten_07.jpg" alt=""> <a href="">《湄公河行动》上映20天票房突破10亿大关</a> <p>猫眼电影 <img class="view" src="./IMG/viewIcon.png" alt=""> 12000 <img src="./IMG/commentIcon.png" alt="">715 </p> </div> <div class="news-item"> <img class="poster" src="./IMG/details_info_10.jpg" alt=""> <a href="">《湄公河行动》2.7亿连冠，周大盘大跌52%</a> <p>猫眼电影 <img class="view" src="./IMG/viewIcon.png" alt=""> 46646 <img src="./IMG/commentIcon.png" alt="">76 </p> </div> <div class="news-item"> <img class="poster" src="./IMG/details_info3_13.jpg" alt=""> <a href="">《湄公河行动》不仅彭于晏没有死，哮天也没有死！</a> <p>橘子娱乐 <img class="view" src="./IMG/viewIcon.png" alt=""> 2953 <img src="./IMG/commentIcon.png" alt="">5 </p> </div> </div> <div class="ri-box1"> <h3>相关电影</h3> <div class="movie-list"> <div> <img src="./IMG/details_related1_27.png" alt=""> <p>反贪风暴</p> <i>8.<span>3</span></i> </div> <div> <img src="./IMG/details_related2_29.png" alt=""> <p>追凶者也</p> <i>8.<span>5</span></i> </div> <div> <img src="./IMG/details_related3_31.png" alt=""> <p>惊天破</p> <i>6.<span>6</span></i> </div> <div> <img src="./IMG/details_related4_41.png" alt=""> <p>机械师2：复活</p> <i>8.<span>9</span></i> </div> <div> <img src="./IMG/details_related5_32.jpg" alt=""> <p>巴黎危机</p> <i>8.<span>3</span></i> </div> <div> <img src="./IMG/details_related6_43.jpg" alt=""> <p>寒战</p> <i>8.<span>6</span></i> </div> </div> </div> </div> </div> </section> <footer> <p>©2016 猫眼电影 maoyan.com 京ICP证160733号 京ICP备16022489号-1 京公网安备 11010102003232号 网络文化经营许可证 电子公告服务规则</p> <p>北京猫眼文化传媒有限公司</p> </footer> </body> </html>
