html网页制作期末大作业-龙腾影视网页html css javascript7个页面适用学生作业，适合大一、大二课程设计在线电影影网、期末作业电影网、毕业设计在线电影网
部分网页截图
设置网页源码
<!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/index.css"> <link rel="stylesheet" href="./css/common.css"> <link rel="icon" href="./img/dragon.ico"> <base href="#" target="_blank"> <title>龙腾电影</title> </head> <body> <!-- 头部导航 --> <nav class="header"> <div class="contain"> <!-- logo区 --> <a href="#" class="logo"><h1>猫眼电影</h1></a> <!-- 选择城市区 --> <div class="cityselect">南昌 <span class="iconfont down-deleta"></span> <div class="city-list"> <span class="postioncty">定位城市：<a href="#">南昌</a></span> <ul class="citys-wrapper"> <li class="citys"> <span class="fl">A</span> <div> <a href="">阿拉善盟</a> <a href="">鞍山</a> <a href="">安庆</a> <a href="">安阳</a> <a href="">阿坝</a> <a href="">安顺</a> <a href="">安康</a> <a href="">阿勒泰</a> <a href="">阿克苏</a> <a href="">安丘</a> <a href="">安岳</a> <a href="">安平</a> <a href="">安宁</a> <a href="">安溪</a> <a href="">安化</a> <a href="">阿勒泰市</a> <a href="">安福</a> </div> </li> <li class="citys"> <span class="fl">B</span> <div> <a href="">北京</a> <a href="">保定</a> <a href="">保定</a> <a href="">包头</a> <a href="">本溪</a> <a href="">巴彦</a> <a href="">淖尔</a> <a href="">白城</a> <a href="">滨州</a> <a href="">博山</a> <a href="">璧山</a> <a href="">宾阳</a> <a href="">博白县</a> <a href="">博罗县</a> <a href="">北镇市</a> <a href="">泊头市</a> <a href="">北安市</a> </div> </li> <li class="citys"> <span class="fl">C</span> <div> <a href="">重庆</a> <a href="">成都</a> <a href="">长沙</a> <a href="">常州</a> <a href="">长春</a> <a href="">沧州</a> <a href="">承德</a> <a href="">赤峰</a> <a href="">长治</a> <a href=""&g;朝阳</a>
<a href="">池州</a>
<a href="">巢湖</a>
<a href="">滁州</a>
<a href="">潮州</a>
<a href="">常德</a>
<a href="">崇左</a>
<a href="">楚雄</a>
<a href="">昌吉</a>
<a href="">从化</a>
<a href="">常熟</a>
<a href="">昌邑</a>
<a href="">慈溪</a>
<a href="">长兴</a>
</div>
</li>
<li class="citys">
<span class="fl">D</span>
<div>
<a href="">大连</a>
<a href="">东莞</a>
<a href="">大庆</a>
<a href="">大同</a>
<a href="">丹东</a>
<a href="">大兴安岭</a>
<a href="">东营</a>
<a href="">德州</a>
<a href="">德阳</a>
<a href="">达州</a>
<a href="">德宏</a>
<a href="">大理</a>
<a href="">迪庆</a>
<a href="">定西</a>
<a href="">敦煌</a>
<a href="">丹阳</a>
<a href="">东台</a>
<a href="">大丰</a>
<a href="">德清</a>
<a href="">东平</a>
<a href="">定州</a>
<a href="">东海</a>
<a href="">东明县</a>
<a href="">定安县</a>
<a href="">定陶区</a>
<a href="">定边县</a>
</div>
</li>
</ul>
</div>
</div>
<!-- 列表 -->
<ul>
<li><a href="./index.html">首页</a></li>
<li><a href="./movie.html">电影</a></li>
<li><a href="./cinema.html">演院</a></li>
<li><a href="#">演出</a></li>
<li><a href="./billbored.html">榜单</a></li>
<li><a href="./hotspot.html">热点</a></li>
<li><a href="./mall.html">商城</a></li>
</ul>
<!-- 用户登入 -->
<div class="userinfo">
<img src="./img/userifo.png" alt="用户">
<span></span>
<span class="user-menu"><a href="./Login.html">登录</a></span>
</div>
<!-- 搜索区 -->
<form action="#" class="serch-form" method="POST">
<input type="search" class="search" placeholder="找影视剧 影人 影院">
<input type="submit" class="submit" value="">
</form>
<!-- app下载 -->
<div class="appdownload">
<a href="#">
<span class="iphone-icon"></span>
<span class="apptext">app下载</span>
<span class="caret"></span>
<div class="downloadicon">
<p class="down-title">扫码下载app</p>
<p class="down-content">选座更优惠</p>
</div>
</a>
</div>
</div>
</nav>
<!-- 横幅广告开始 -->
<div class="canner-wrap">
<div class="canner-fl fl">
<p>
<a href="">最新通知<span class="arrow-r">></span></a>
<span class="more-info">
<span class="msg">1.loremfdafawfaewfefe</span>
<span class="msg">2.lorem</span>
<span class="msg">3.lorem</span>
<span class="msg">4.lorem</span>
<span class="msg">5.lorem</span>
</span>
</p>
<p>
<a href="">电影推荐<span class="arrow-r">></span></a>
<span class="more-info">
<span class="msg">1.loremfdafawfaewfefe</span>
<span class="msg">2.lorem</span>
<span class="msg">3.lorem</span>
<span class="msg">4.lorem</span>
<span class="msg">5.lorem</span>
</span>
</p>
<p>
<a href="">开发平台<span class="arrow-r">></span></a>
<span class="more-info">
<span class="msg">1.loremfdafawfaewfefe</span>
<span class="msg">2.lorem</span>
<span class="msg">3.lorem</span>
<span class="msg">4.lorem</span>
<span class="msg">5.lorem</span>
</span>
</p>
<p>
<a href="">知识产权<span class="arrow-r">></span></a>
<span class="more-info">
<span class="msg">1.loremfdafawfaewfefe</span>
<span class="msg">2.lorem</span>
<span class="msg">3.lorem</span>
<span class="msg">4.lorem</span>
<span class="msg">5.lorem</span>
</span>
</p>
<p>
<a href="">欢喜首映<span class="arrow-r">></span></a>
<span class="more-info">
<span class="msg">1.loremfdafawfaewfefe</span>
<span class="msg">2.lorem</span>
<span class="msg">3.lorem</span>
<span class="msg">4.lorem</span>
<span class="msg">5.lorem</span>
</span>
</p>
<p>
<a href="">关于我们<span class="arrow-r">></span></a>
<span class="more-info">
<span class="msg">1.loremfdafawfaewfefe</span>
<span class="msg">2.lorem</span>
<span class="msg">3.lorem</span>
<span class="msg">4.lorem</span>
<span class="msg">5.lorem</span>
</span>
</p>
</div>
<div class="canner-fr fr">
<ul class="announce">
<li class="spec"><a href="">最新公告</a></li>
<li><a href="">什么?龙腾出新电影了......</a></li>
<li><a href="">勇敢者游戏好评如潮......</a></li>
<li><a href="">冰雪奇缘这个冬天最热......</a></li>
<li><a href="">战狼三即将上映......</a></li>
</ul>
<img src="./img/funny.jpg" alt="" class="funny" id="now-hot">
</div>
<div class="canner">
<img src="./img/scenery1.jpg" alt="">
<img src="./img/scenery2.jpg" alt="">
<img src="./img/scenery3.jpg" alt="">
<img src="./img/scenery4.jpg" alt="">
<span class="left-arr"><</span>
<span class="right-arr">></span>
<p class="text-info"><a href="">你不看是你的错，不好看是我的错</a></p>
<ul class="choose-dot">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
<!-- 横幅广告介绍 -->
<!-- 第一个主要区域 -->
<div class="contain bfc" id="chief">
<!-- 右边 -->
<div class="aside fr">
<span class="panel-title">今日票房</span>
<!-- 电影list -->
<div class="panel-content bfc">
<ul>
<li class="ranking-item-top">
<a href="#">
<div class="ranking-top-left">
<i class="ranking-top-icon"></i>
<img src="./img/ranking-img.png" alt="">
</div>
<div class="ranking-top-right">
<span class="movie-name">冰雪奇缘2</span>
<p class="movie-wish">8473.65万</p>
</div>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index">2</i>
<span class="ranking-movie-name">大约在冬季</span>
<span class="stonefont">426.20万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index">3</i>
<span class="ranking-movie-name">海上钢琴师</span>
<span class="stonefont">431.02万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">4</i>
<span class="ranking-movie-name">你是凶手</span>
<span class="stonefont">389.35万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">5</i>
<span class="ranking-movie-name">少年的你</span>
<span class="stonefont">355.86万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">6</i>
<span class="ranking-movie-name">决战中途岛</span>
<span class="stonefont">335.19万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">7</i>
<span class="ranking-movie-name">触不可及</span>
<span class="stonefont">197.75万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">8</i>
<span class="ranking-movie-name">我和我的祖国</span>
<span class="stonefont">126.51万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">9</i>
<span class="ranking-movie-name">受益人</span>
<span class="stonefont">108.84万</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">10</i>
<span class="ranking-movie-name">天气之子</span>
<span class="stonefont">103.01万</span>
</a>
</li>
</ul>
</div>
<div class="box-total-wrapper">
<h3>今日大盘</h3>
<div class="fr bottom-left">
<p>
<span class="num">1.40亿</span>
<a href="#" class="more">查看更多></a>
</p>
<p>
<span class="time">北京时间 15:30:50</span>
<span class="pull-right">专业版实时票房数据</span>
</p>
</div>
</div>
</div>
<!-- 左边 -->
<div class="main">
<div class="panelhead">
<span class="textcolor-red">正在热映(32部)</span>
<span class="more"><a href="">更多></a></span>
</div>
<!-- 电影列表 -->
<div class="panel-content">
<dl class="movies-list">
<dd class="movie-item">
<a href="" class="movie-img"><img src="./img/movie1.jpg" alt=""></a>
<a href=""><div class="movie-sale">购票</div></a>
<i class="imax3d"></i>
<i class="integer">8.<span>0</span></i>
<div class="movietitle">冰雪奇缘2</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img"><img src="./img/movie4.jpg" alt=""></a>
<a href=""><div class="movie-sale">购票</div></a>
<i class="imax3d"></i>
<i class="integer">9.<span>7</span></i>
<div class="movietitle">中国机长</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img"><img src="./img/movie7.jpg" alt=""></a>
<a href="#"><div class="movie-sale">购票</div></a>
<i class="imax3d"></i>
<i class="integer">9.<span>3</span></i>
<div class="movietitle">决战中途岛</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img"><img src="./img/movie8.jpg" alt=""></a>
<a href="#"><div class="movie-sale">购票</div></a>
<i class="integer">9.<span>0</span></i>
<div class="movietitle">终结者</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img"><img src="./img/movie9.jpg" alt=""></a>
<a href="#"><div class="movie-sale">购票</div></a>
<i class="imax3d"></i>
<i class="integer">8.<span>7</span></i>
<div class="movietitle">攀登者</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img"><img src="./img/movie21.jpg" alt=""></a>
<a href="#"><div class="movie-sale">购票</div></a>
<i class="imax3d"></i>
<i class="integer">9.<span>0</span></i>
<div class="movietitle">冰封暴</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img"><img src="./img/movie11.jpg" alt=""></a>
<a href="#"><div class="movie-sale">购票</div></a>
<i class="integer">8.<span>9</span></i>
<div class="movietitle">勇敢者游戏</div>
</dd>
<dd class="movie-item" id="hot-movie">
<a href="" class="movie-img"><img src="./img/movie26.jpg" alt=""></a>
<a href="#"><div class="movie-sale">购票</div></a>
<i class="integer">9.<span>5</span></i>
<div class="movietitle">利刃出鞘</div>
</dd>
</dl>
</div>
</div>
</div>
<!-- 第二个主要区域 -->
<div class="contain bfc" id="chief">
<!-- 右边 -->
<div class="aside fr" id="hot-movie">
<span class="panel-title text-yellow">TOP 100</span>
<span class="see-com">查看完整榜单></span>
<!-- 电影list -->
<div class="panel-content bfc">
<ul>
<li class="ranking-item-top">
<a href="#">
<div class="ranking-top-left">
<i class="ranking-top-icon"></i>
<img src="./img/ranking-img2.jpg" alt="">
</div>
<div class="ranking-top-right">
<span class="movie-name">霸王别姬</span>
<p class="movie-wish">8万</p>
</div>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index">2</i>
<span class="ranking-movie-name">肖申克的救赎</span>
<span class="stonefont">9.5分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index">3</i>
<span class="ranking-movie-name">罗马假日</span>
<span class="stonefont">9.1分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">4</i>
<span class="ranking-movie-name">这个杀手不太冷</span>
<span class="stonefont">9.5分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">5</i>
<span class="ranking-movie-name">泰坦尼克号</span>
<span class="stonefont">9.5分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">6</i>
<span class="ranking-movie-name">唐伯虎点秋香</span>
<span class="stonefont">9.1分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">7</i>
<span class="ranking-movie-name">乱世佳人</span>
<span class="stonefont">9.1分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">8</i>
<span class="ranking-movie-name">魂断蓝桥</span>
<span class="stonefont">9.2分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">9</i>
<span class="ranking-movie-name">天空之城</span>
<span class="stonefont">9.0分</span>
</a>
</li>
<li class="ranking-item">
<a href="#">
<i class="ranking-index color-ccc">10</i>
<span class="ranking-movie-name">辛德勒的名单</span>
<span class="stonefont">9.0分</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 左边 -->
<div class="main">
<div class="panelhead">
<span class="textcolor-blue"> 热播电影</span>
<a href="#" class="special2">爱情</a>
<a href="#" class="special2">喜剧</a>
<a href="#" class="special2">动作</a>
<a href="#" class="special2">恐怖</a>
<a href="#" class="special2">动画</a>
<span class="more"><a href="">更多></a></span>
</div>
<!-- 电影列表 -->
<div class="panel-content">
<dl class="movies-list movies-list-2">
<dd class="movie-item movie-item-spec">
<a href="" class="movie-img-bg">
<img src="./img/index-movie-bg.jpg" alt="">
</a>
<i class="integer2">9.<span>0</span></i>
<div class="movietitle2">唐人街探案2</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img">
<img src="./img/movie2.jpg" alt="">
</a>
<i class="integer2">8.<span>6</span></i>
<div class="movietitle2">战狼</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img">
<img src="./img/movie3.jpg" alt="">
</a>
<i class="integer2">8.<span>9</span></i>
<div class="movietitle2">大圣归来</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img">
<img src="./img/movie11.jpg" alt="">
</a>
<i class="integer2">9.<span>5</span></i>
<div class="movietitle2">勇敢者游戏2</div>
</dd>
<dd class="movie-item" style="margin-left: 22px;">
<a href="" class="movie-img">
<img src="./img/movie12.jpg" alt="">
</a>
<i class="integer2">9.<span>8</span></i>
<div class="movietitle2">魔镜奇缘3</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img">
<img src="./img/movie28.jpg" alt="">
</a>
<i class="integer2">9.<span>5</span></i>
<div class="movietitle2">吹哨人</div>
</dd>
<dd class="movie-item">
<a href="" class="movie-img">
<img src="./img/movie9.jpg" alt="">
</a>
<i class="integer2">8.<span>7</span></i>
<div class="movietitle2">攀登者</div>
</dd>
</dl>
</div>
</div>
</div>
<!-- 右侧导航栏开始 -->
<div id="tool">
<div class="bnt">
<span class="iconfont doll"></span>
<a href="#" class="c1 active">好店 直播</a>
<a href="#now-hot" class="c2">正在 热映</a>
<a href="#hot-movie" class="c3">热播 电影</a>
<a href="#" class="c4">投诉 反馈</a>
<a href="#" class="c5">回到 顶部</a>
</div>
</div>
<!-- 右侧导航栏结束 -->
<!-- 底部开始 -->
<div class="footer">
<p class="special">关于龙腾:
<a href="">关于我们</a>
<span>|</span>
<a href="">管理团队</a>
<span>|</span>
<a href="">投资者关系</a> 友情链接:
<a href="">美团网</a>
<span>|</span>
<a href="">格瓦拉</a>
<span>|</span>
<a href="">美团下载</a>
<span>|</span>
<a href="">欢喜首映</a>
</p>
<p>商务合作邮箱：v@longteng.com 客服电话：10105335 违法和不良信息举报电话：4006019900 </p>
<p>用户投诉邮箱：tousujubao@meituan.com 舞弊线索举报邮箱：wubijubao@longteng.com </p>
<p>
<a href="#">中华人民共和国增值电信业务经营许可证 京B2-20190350 </a>
<span>|</span>
<a href="#"> 营业性演出许可证 京演（机构）（2019）4094号</a>
</p>
<p>
<a href="#">广播电视节目制作经营许可证 （京）字第08478号 </a>
<span>|</span>
<a href="#"> 网络文化经营许可证 京网文（2019）3837-369号</a>
</p>
<p>
<a href="#">龙腾用户服务协议 </a>
<span>|</span>
<a href="#"> 龙腾平台交易规则总则</a>
<span>|</span>
<a href="#">隐私政策</a>
</p>
<p><a href="">京公网安备 11010102003232号</a></p>
<p>江西龙腾文化传媒有限公司</p>
<p>©2019 龙腾电影 longteng.com</p>
<p class="last">
<a href="#"><img src="./img/network.png" alt=""></a>
<a href="#"><img src="./img/license.png" alt=""></a>
</p>
</div>
<!-- 底部结束 -->
</body>
</html>
@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.eot');
src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../font/iconfont.woff2') format('woff2'),
url('../font/iconfont.woff') format('woff'),
url('../font/iconfont.ttf') format('truetype'),
url('../font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 公共样式开始 */
.contain{
width: 1230px;
/* margin-top: 60px; */
margin: 0 auto;
}
/* 公共样式结束 */
/* 横幅广告开始 */
.canner-wrap {
width: 1230px;
margin: 0 auto;
margin-top: 140px;
outline: 1px solid #f40;
}
.canner-wrap .canner-fl {
width: 260px;
height: 350px;
margin-right: 20px;
}
.canner-fl p {
height: 57px;
background: #ccc;
line-height: 57px;
text-align: center;
position: relative;
border-bottom: 2px dotted #ffb400;
}
.canner-fl p:hover {
background: #efefef;
}
.canner-fl p:nth-child(6){
border: none;
}
.canner-fl p .arrow-r {
padding-left: 125px;
}
.canner-fl p .more-info {
display: none;
position: absolute;
top: 0;
left: 260px;
width: 130px;
height: 210px;
background: #efefef;
z-index: 2;
text-align: left;
}
.canner-fl p:hover .more-info{
display: block;
}
.canner-fl p .more-info .msg{
display: block;
margin-left: 15px;
line-height: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.canner-wrap .canner-fr {
width: 230px;
height: 350px;
outline: 1px solid #ccc;
}
.canner-fr .announce {
padding: 10px 6px;
}
.canner-fr .announce li {
list-style: inside;
margin:5px 0;
}
.canner-fr .announce .spec {
list-style: none;
}
.canner-fr .announce .spec a{
font-size: 18px;
color: red;
}
.canner-fr .announce a:hover {
color: red;
text-decoration: underline;
}
.canner-fr .funny {
width: 230px;
height: 192px;
}
.canner {
width: 700px;
height: 350px;
overflow: hidden;
position: relative;
}
.canner img {
position: absolute;
width: 700px;
height: 350px;
opacity: 0;
animation: simg 12s infinite;
}
@keyframes simg {
0%{opacity: 1}
2%{opacity: 1}
4%{opacity: 1}
20%{opacity: 1}
}
img:nth-child(0){animation-delay: 0s;}
img:nth-child(1){animation-delay: 3s;}
img:nth-child(2){animation-delay: 6s;}
img:nth-child(3){animation-delay: 9s;}
.canner .left-arr {
position: absolute;
left: 5px;
top: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: rgba(0,0,0,.3);
z-index: 10;
cursor: pointer;
}
.canner .right-arr {
position: absolute;
right: 5px;
top: 150px;
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-size: 30px;
line-height: 50px;
text-align: center;
background-color: rgba(0,0,0,.3);
z-index: 10;
cursor: pointer;
}
.canner .text-info {
position: absolute;
left: 5px;
bottom: 15px;
}
.canner .text-info a {
color: #fff;
}
.canner .choose-dot {
position: absolute;
right: 8px;
bottom: 15px;
}
.canner .choose-dot li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
margin: 0 5px;
border: 1px solidrgba(0,0,0,.05);
background: #fff;
cursor: pointer;
}
.canner .choose-dot li:hover {
background: chocolate;
}
/* 横幅广告介绍 */
/* 主区域的右边开始 */
#chief{
margin-top: 60px;
}
#chief .aside{
width: 360px;
height: 614px;
/* border: 1px solid red; */
}
#chief .aside .panel-title{
color: #ef4238;
font-size: 26px;
}
#chief .panel-content{
width: 100%;
margin-top: 23px;
}
#chief .panel-content .ranking-item-top{
margin-bottom: 11px;
}
#chief .panel-content .ranking-item-top .ranking-top-left{
width: 120px;
height: 78px;
float: left;
position: relative;
margin-right: 10px;
}
#chief .panel-content .ranking-item-top .ranking-top-left .ranking-top-icon{
width: 22px;
height: 25px;
position: absolute;
left: 0;
top: 0;
background-image: url("../img/ranking-top-icon.png");
background-size: contain;
}
#chief .panel-content .ranking-item-top .ranking-top-right{
height: 78px;
border: 1px solid #ccc;
}
#chief .panel-content .ranking-item-top .ranking-top-right:hover{
background-color: #ccc;
}
#chief .panel-content .ranking-item-top .ranking-top-right .movie-name{
color: #333;
font-size: 18px;
line-height: 1.4;
display: inline-block;
margin-top: 9px;
}
#chief .panel-content .ranking-item-top .ranking-top-right .movie-wish{
margin-top: 12px;
font-size: 14px;
color: #ef4238;
}
#chief .panel-content .ranking-item{
width: 360px;
height: 36.6px;
line-height: 36.6px;
}
#chief .panel-content .ranking-item:hover {
background: #f7f7f7;
}
#chief .panel-content .ranking-item .ranking-index{
color: #ef4238;
display: inline-block;
width: 20px;
}
#chief .panel-content .ranking-item .color-ccc {
color: #ccc;
}
#chief .panel-content .ranking-item .ranking-movie-name{
font-size: 16px;
color:#333;
vertical-align: top;
}
#chief .panel-content .ranking-item .stonefont{
float: right;
font-size: 14px;
color:#ef4238;
}
#chief .box-total-wrapper {
margin-top: 32px;
}
#chief .box-total-wrapper>h3{
width: 20px;
height: 83px;
padding: 10px;
color: #fff;
text-align: center;
line-height: 21px;
font-weight: 400;
font-size: 17px;
background-color: #ef4238;
float: left;
}
#chief .box-total-wrapper .bottom-left{
height: 102px;
width: 319px;
border: 1px solid #ccc;
border-left: none;
}
#chief .box-total-wrapper .bottom-left .num{
display: inline-block;
font-size: 22px;
font-weight: 700;
margin: 22px 130px 10px 22px;
color: #ef4238;
}
#chief .box-total-wrapper .bottom-left .more{
color: #ef4238;
}
#chief .box-total-wrapper .bottom-left .time{
margin: 0 10px 0 22px;
color: #999;
font-size: 14px;
}
#chief .box-total-wrapper .bottom-left .pull-right{
color: #999;
font-size: 14px;
}
/* 主区域的右边结束 */
/* 主区域的左边开始 */
.contain .main{
width: 801px;
height: 614px;
padding-right: 36px;
/* background: #ef4238; */
/* border: 1px solid red; */
}
.contain .main .panelhead{
width: 740px;
height: 26px;
font-size: 26px;
line-height: 26px;
color: #ef4238 !important;
}
.contain .main .panelhead .more{
float: right;
font-size: 14px;
line-height: 16px;
margin-top: 10px;
}
.contain .main .panelhead .more a {
color: #ef4238;
}
.contain .main .panel-content{
width: 100%;
margin-top: 23px;
}
.contain .main .panel-content .movies-list{
margin: -23px 0 20px -25px;
}
.contain .main .panel-content .movies-list .movie-item{
width: 161.1px;
/* height: 260.6px; */
border: 1px solid #efefef;
margin: 30px 0 0 30px;
display: inline-block;
vertical-align: top;
position: relative;
}
.contain .main .panel-content .movies-list .movie-item .movie-sale{
text-align: center;
height: 42px;
line-height: 39px;
color: #ef4238;
}
.contain .main .panel-content .movies-list .movie-item .movie-sale:hover {
color:#fff;
background-color:#ef4238;
}
.contain .main .panel-content .movies-list .movie-item .imax3d{
width: 69px;
height: 25px;
background: url("../img/3dmax.png");
background-size: contain;
position: absolute;
top: 4px;
left: -2px;
font-size: 12px;
color:#fff;
}
.contain .main .panel-content .movies-list .movie-item .integer{
position: absolute;
right: 12px;
bottom: 54px;
font-size: 18px;
color: #ffb400;
}
.contain .main .panel-content .movies-list .movie-item .integer span{
font-size: 14px;
}
.contain .main .panel-content .movies-list .movie-item .movietitle{
position: absolute;
left: 10px;
bottom: 54px;
color: #fff;
font-size: 16px;
line-height: 22px;
}
/* 主区域的左边结束 */
/* 第二个主区域的左边开始 */
.panelhead .textcolor-blue {
color: #2d98f3 !important;
}
.panelhead a:hover {
text-decoration: underline;
}
.panelhead .more a {
color: #2d98f3;
}
.contain .main .panelhead .special2{
font-size: 14px;
color: #333;
margin-left: 10px;
}
.contain .aside .text-yellow{
color: #ffb400 !important;
margin-right: 140px;
}
.contain .aside .see-com{
color: #ffb400 !important;
}
.contain .main .panel-content .movies-list .movie-item-spec{
width: 350px;
height: 220px;
}
/* .contain .main .panel-content .movies-list .movie-item {
margin: 50px 0 0 30px;
} */
.movie-item .integer2 {
position: absolute;
right: 10px;
bottom: 6px;
font-size: 18px;
color:#ffb400;
}
.movie-item .integer2 span {
font-size: 14px;
}
.movie-item .movietitle2 {
position: absolute;
left: 6px;
bottom: 6px;
color:#fff;
font-size: 16px;
line-height: 22px;
}
/* 第二个主区域的左边结束 */
/* 右侧导航开始 */
#tool{
width: 50px;
height: 303px;
border: 1px solid red;
position: fixed;
top: 300px;
right: 3%;
border-radius: 8px;
}
#tool .bnt{
text-align: center;
position: relative;
}
.bnt .doll {
position: absolute;
top: -21px;
left: 10px;
font-size: 20px;
color:#008c8c;
}
#tool .bnt a{
display: block;
width: 100%;
height: 50px;
/* line-height: 70px; */
text-align: center;
padding-top: 10px;
background: #fff;
border-bottom: 1px solid #ccc;
}
#tool .bnt .active{
border-radius: 8px 8px 0 0;
color: #fff;
background: #f40;
font-weight: bold;
}
#tool .bnt a:nth-child(6){
border-bottom: none;
border-radius: 0 0 8px 8px;
}
#tool .bnt a:hover{
color: #fff;
background: #f40;
font-weight: bold;
}
/* 右侧导航接受 */
计报告8页