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">&#xe503;</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">查看更多&gt;</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="">更多&gt;</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&nbsp;100</span><span class="see-com">查看完整榜单&gt;</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="">更多&gt;</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">&#xe501;</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>&nbsp;友情链接:<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页

HTML期末学生大作业-视频影视网页html+css+javascript（带报告册）相关推荐

  1. HTML期末学生大作业-在线电影网站html+css+javascript

    html网页制作期末大作业--电影网站html+css+javascript 5个页面适用学生作业 课程设计在线电影影网.期末作业电影网.毕业设计在线电影网 部分页面截图 部分源代码 <!DOC ...

  2. HTML期末学生大作业-拯救宠物网页作业html+css

  3. Web前端大作业制作个人网页(html+css+javascript)

  4. HTML网页设计期末课程大作业 ：汽车网页——宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载

    HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载 临近期末, 你还在为HTML网页设计结课作 ...

  5. HTML网页设计期末课程大作业 ：汽车网页——宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载...

    HTML网页设计期末课程大作业 :汽车网页--宝马轿车 6页 带背景音乐 学生网页设计作业HTML+CSS+JavaScript学生网页课程设计期末作业下载 临近期末, 你还在为HTML网页设计结课作 ...

  6. web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作...

    web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...

  7. web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作

    web前端期末大作业(月饼美食网站) html+css+javascript网页设计实例 企业网站制作 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? ...

  8. HTML+CSS+JS网页设计期末课程大作业 --电影主题 网页规划与设计

    Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业, | HTML期末大学生网页设计作业 HTML:结构 CSS:样式 在操作方面上运用了html ...

  9. HTML期末学生大作业-奶茶网页作业html+css+javascript

    html网页制作期末大作业--奶茶网站html+css+javascript 5个页面适用学生作业 课程设计奶茶.期末作业奶茶网.毕业设计奶茶网页 部分网页截图  部分网页源码 <!DOCTYP ...

  10. HTML期末学生大作业-电影网站html+css+javascript

    HTML网页制作期末大作业-电影网站html+css+javascript 9个页面适用学生作业 课程设计在线电影影网.期末作业电影网.毕业设计在线电影网 10个JS效果 部分电影网页页面  ​​​​ ...

最新文章

  1. P2894 [USACO08FEB]酒店Hotel
  2. 13-day13-str
  3. mysql注入语句解释,MYSQL注入语句实用精解
  4. linux下源码安装nginx
  5. properties（map）增.删.改.查.遍历
  6. python输入的数字为什么不能计算_计算器为什么只能进行个位数的计算，每次只能输入一个数字，求...
  7. codevs1521 华丽的吊灯
  8. mysql unauthenticated user原因分析以及解决方法
  9. Python之“可变”的tuple
  10. 解决ubuntu下arduino IDE的Serial Port无法选择问题
  11. “Get that job at Google”笔记
  12. KVM详解（八）——KVM虚拟机自启动
  13. Boost Log : Trivial logging with filters
  14. [译]露天矿山道路设计指南:第一章
  15. USB Server远程连接USB实现方式
  16. python窗口找图_python查找图片在原始图片上的坐标点
  17. TortoiseGit安装和使用的图文教程
  18. 使用gevent的Pool实现异步并发
  19. 网络安全工程师（渗透运维）难学吗？
  20. js技术输入框中输入身份证号自动带出年龄,生日,性别

热门文章

  1. 如何阻止手机虚拟键盘弹起
  2. 深入理解Guava的异步回调模式
  3. 【ITSM】什么是ITSM,IT部门为什么需要ITSM
  4. 软件单元测试文档,演示文稿软件应用单元测试题
  5. 农民工看完都学会了！Android开发岗还不会这些问题，跳槽薪资翻倍
  6. paddle——站在巨人肩膀上及背刺二三事
  7. 服务器2012r2安装虚拟,Windows2012R2创建Hyper-v虚拟化群集
  8. 服务器一装2008r2系统就蓝屏,服务器安装2008r2后蓝屏
  9. java面向对象孙卫琴_[转]归去来兮，回归本源 ——评孙卫琴新作《Java面向对象编程》...
  10. epoch训练时间不同_epoch、batch size和iterations