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="">朝阳</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页
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/19220.html