HTML网页制作期末大作业-电影网站html+css+javascript 9个页面适用学生作业课程设计在线电影影网、期末作业电影网、毕业设计在线电影网10个JS效果
部分电影网页页面
部分电影网页页面源码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/clear.css"><title>首页</title><link rel="icon" href="images/title-lolg.png"></head><body><header><div class="header-body"><a href="index.html?123" class="logo">猫眼电影</a><div class="city">成都<span class="caret"></span></div><div class="city-list"><div class="now-city">定位城市: 定位失败</div><div class="citys"><span class="icon"></span> 定位失败</div></div><div class="nav"><ul class="nav-list"><li><a href="index.html?123" class="nav-model active">首页</a></li><li><a href="movies.html" class="nav-model">电影</a></li><li><a href="cinemas.html" class="nav-model">影院</a></li><li class="nav-model">演出</li><li class="nav-model">榜单</li><li class="nav-model">热点</li><li class="nav-model">商城</li></ul></div><div class="app-download"><a href="#"><span class="phone"></span> APP下载<span class="caret"></span><div class="appcode"><img src="images/phonecode.png" class="app-code"></img><p class="down-tip">扫码下载APP</p><p class="down-text">选座更优惠</p></div></a></div><div class="search"><div type="text" class="searchinput"><input type="text" class="input" placeholder="找影视剧、影人、影院"><input class="submit" type="submit" value=""></div></div><div class="userimg"><img src="images/user.png" alt=""><span class="caret"></span></div><div class="userlogin"><a href="login.html" class=" notlogin">登录</a><div class="islogin nologin"><a href="personal.html">个人中心</a><a href="index.html">退出</a></div></div></header><!-- 轮播图 --><div class="wrap" id="wrap"><ul class="content"></ul><a href="javascript:;" class="prev"><</a><a href="javascript:;" class="next">></a></div><!-- 页面主体 --><div class="container"><div class="main"><!-- 正在热映 --><div class="hot-movie"><h2>正在热映（4部）</h2><div class="movies" id="hotmovies"></div></div><!-- 即将上映 --><div class="movie-box"><div class="movie-header"><h2>即将上映（115部）</h2><a href="#"><span>全部></span></a></div><div class="movies"><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>9月31日上映</p></div><div class="movies-model"><a href=""><img src="images/hotmovie2.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>10月2日上映</p></div><div class="movies-model"><a href=""><img src="images/hotmovie3.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>11月1日上映</p></div><div class="movies-model"><a href=""><img src="images/hotmovie4.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>9月23日上映</p></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>9月31日上映</p></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>9月31日上映</p></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>9月31日上映</p></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>46461661人想看</p><button onclick="alert('123')">预告片</button><button onclick="alert('123')">预售</button><p>9月31日上映</p></div></div></div><!-- 热播电影 --><div class="movie-box"><div class="movie-header c hotmovie "><h2>热播电影（115部）</h2><a href="#"><span>全部></span></a></div><div class="movies movies-hot"><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie2.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie3.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie4.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div></div></div><!-- 喜剧电影 --><div class="movie-box"><div class="movie-header"><h2>喜剧电影（115部）</h2><a href="#"><span>全部></span></a></div><div class="movies"><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie2.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie3.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie4.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div></div></div><!-- 动作电影 --><div class="movie-box"><div class="movie-header c hotmovie "><h2>动作电影（125部）</h2><a href="#"><span>全部></span></a></div><div class="movies movies-hot"><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie2.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie3.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie4.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div></div></div><!-- 恐怖片 --><div class="movie-box"><div class="movie-header"><h2>恐怖电影（115部）</h2><a href="#"><span>全部></span></a></div><div class="movies"><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie2.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie3.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie4.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div><div class="movies-model"><a href=""><img src="images/hotmovie1.png" alt="" srcset=""></a><p>9.0分</p><button class="buynow">立即购票</button></div></div></div></div><!-- 侧边栏 --><div class="aside"><!-- 今日票房 --><div class="rank"><h2>今日票房</h2><div class="ranklist"><ul class="ranks"><li class=" rangk-item-first clearfix"><a href="#"><div class="first-item clearfix"><img src="images/rank.png" alt="" srcset=""></div><p class="name">爱宠大机密2</p><p class="money">0.72万</p></a></li><li class="rank-item"><a href="#"><div class="index-box"><i class="index index-hot">2</i><span>冰雪奇缘2</span></div><span class="index-money">0.00万</span></a></li><li class="rank-item"><a href="#"><div class="index-box"><i class="index index-hot">3</i><span>冰雪奇缘2</span></div><span class="index-money">0.00万</span></a></li><li class="rank-item"><a href="#"><div class="index-box"><i class="index">4</i><span>冰雪奇缘2</span></div><span class="index-money">0.00万</span></a></li><li class="rank-item"><a href="#"><div class="index-box"><i class="index">5</i><span>冰雪奇缘2</span></div><span class="index-money">0.00万</span></a></li></ul></div></div><!-- 今日大盘 --><div class="aside-total"><h2 class="total-nav">今日大盘</h2><div class="total-body"><h2>0.6 <span>万</span></h2><span class="more">查看更多></span><p class="time"><span>北京时间14:48:31</span> <span>猫眼专业版实时票房数据</span></p></div></div><!-- 最受期待 --><div class="hope"><h2>最受期待 <span>查看完整榜单></span></h2><div class="hope-body"><ul class="hope-list"><li class="hope-item-top1"><a href="#"><div class="hope-img"><img src="images/hope1.png" alt=""></div><div class="hope-text"><p class="hope-name">姜子牙</p><p class="hope-time">上映时间：</p><p class="hope-num">932707人想看</p></div></a></li><li class="hope-item-top"><a href="#"><div class="hope-img"><img src="images/hope2.png" alt=""></div><p class="hope-name">哪吒重生</p><p class="hope-num">932707人想看</p></a></li><li class="hope-item-top left"><a href="#"><div class="hope-img"><img src="images/hope3.png" alt=""></div><p class="hope-name">唐人街探案3</p><p class="hope-num">932707人想看</p></a></li><li class="hope-item"><a href="#"><div class="index-box"><i class="index index-hot">4</i><span>冰雪奇缘2</span></div><span class="hope-num">932707人想看</span></a></li><li class="hope-item"><a href="#"><div class="index-box"><i class="index index-hot">5</i><span>冰雪奇缘2</span></div><span class="hope-num">932707人想看</span></a></li><li class="hope-item"><a href="#"><div class="index-box"><i class="index index-hot">6</i><span>冰雪奇缘2</span></div><span class="hope-num">932707人想看</span></a></li><li class="hope-item"><a href="#"><div class="index-box"><i class="index index-hot">7</i><span>冰雪奇缘2</span></div><span class="hope-num">932707人想看</span></a></li><li class="hope-item"><a href="#"><div class="index-box"><i class="index index-hot">8</i><span>冰雪奇缘2</span></div><span class="hope-num">932707人想看</span></a></li><li class="hope-item"><a href="#"><div class="index-box"><i class="index index-hot">9</i><span>冰雪奇缘2</span></div><span class="hope-num">932707人想看</span></a></li><li class="hope-item"><a href="#"><div class="index-box"><i class="index index-hot">10</i><span>冰雪奇缘2</span></div><span class="hope-num">932707人想看</span></a></li></ul></div></div><!-- top100 --><div class="top"><h2>TOP 100 <span>查看完整榜单></span></h2><div class="toplist"><ul class="topone"><li class=" top-item-first clearfix"><a href="#"><div class="first-item clearfix"><img src="images/top1.png" alt="" srcset=""></div><p class="name">活着</p><p class="money">9.0分</p></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index index-hot">2</i><span>钢琴家</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index index-hot">3</i><span>勇敢的心</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index">4</i><span>阿飞正传</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index">5</i><span>射雕英雄传之东成西就</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index">6</i><span>爱回家</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index">7</i><span>初恋这件小事</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index">8</i><span>泰坦尼克号</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index">9</i><span>迁徙的鸟</span></div><span class="index-money">8.8分</span></a></li><li class="top-item"><a href="#"><div class="index-box"><i class="index">10</i><span>蝙蝠侠：黑暗骑士</span></div><span class="index-money">8.8分</span></a></li></ul></div></div><!-- 热门影人 --><div class="people"><h2>热门影人</h2><div class="peoplelist"><ul class="peoples"><li class=" people-item-first clearfix"><a href="#"><div class="first-item clearfix"><img src="images/people.png" alt="" srcset=""></div><p class="name">大张伟</p></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index index-hot">2</i><span>蔡国庆</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index index-hot">3</i><span>黄一山</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index">4</i><span>蔡轩正</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index">5</i><span>平安</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index">6</i><span>王源</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index">7</i><span>小黑</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index">8</i><span>郁可唯</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index">9</i><span>许魏洲</span></div></a></li><li class="people-item"><a href="#"><div class="index-box"><i class="index">10</i><span>王力宏</span></div></a></li></ul></div></div><!-- 娱乐热点 --><div class="hotspot"><h2>娱乐热点</h2><div class="hotspotlist"><ul class="hotspots"><li class=" hotspot-item-first clearfix"><a href="#"><div class="first-item clearfix"><img src="images/hotspot.png" alt="" srcset=""></div><p class="name">《什刹海》今晚央一开播...</p></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index index-hot">2</i><span>反差萌!动画电影《杨戬》“哮天犬” 形象首次曝光</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index index-hot">3</i><span>《民初奇人传》火热收官奇趣甜三大法宝发力赢口碑</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index">4</i><span>电影《再见吧!少年》曝阵容刘敏涛荣梓杉大银幕..</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index">5</i><span>布拉德:皮特参演《死侍2》导演全新动作片后者曾...</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index">6</i><span>《漂亮书生》首曝剧照鞠婧祎宋威龙携“漂亮战队...</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index">7</i><span>《温暖的抱抱》首曝预告常远李沁邂逅妙手“神经...</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index">8</i><span>汤姆汉克斯一让每一 份人生， 都成为充满期待的..</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index">9</i><span>电影《至暗陷阱》至暗双雄霸气亮相明暗对决一触..</span></div></a></li><li class="hotspot-item"><a href="#"><div class="index-box"><i class="index">10</i><span>《什刹海》央一定档7.10， “多彩京韵” 版海报今...</span></div></a></li></ul></div></div></div></div><!-- 页面底部 --><div class="footer" style="visibility: visible;"><p class="friendly-links">关于猫眼 :<a href="#" target="_blank">关于我们</a><span></span><a href="#" target="_blank">管理团队</a><span></span><a href="#" target="_blank">投资者关系</a> 友情链接 :<a href="#" data-query="utm_source=wwwmaoyan" target="_blank">美团网</a><span></span><a href="#" data-query="utm_source=wwwmaoyan">格瓦拉</a><span></span><a href="#" data-query="utm_source=wwwmaoyan" target="_blank">美团下载</a><span></span><a href="#" data-query="utm_source=maoyan_pc" target="_blank">欢喜首映</a></p><p class="friendly-links">商务合作邮箱：v@ 客服电话：10105335 违法和不良信息举报电话：4006018900</p><p class="friendly-links">用户投诉邮箱：tousujubao@ 舞弊线索举报邮箱：wubijubao@</p><p class="friendly-links credentials"><a href="#" target="_blank">中华人民共和国增值电信业务经营许可证 京B2-0350</a><span></span><a href="#" target="_blank">营业性演出许可证 京演（机构）（）4094号</a></p><p class="friendly-links credentials"><a href="#" target="_blank">广播电视节目制作经营许可证 （京）字第08478号</a><span></span><a href="#" target="_blank">网络文化经营许可证 京网文（）3837-369号 </a></p><p class="friendly-links credentials"><a href="#" target="_blank">猫眼用户服务协议 </a><span></span><a href="#" target="_blank">猫眼平台交易规则总则 </a><span></span><a href="#" target="_blank">隐私政策 </a></p><p class="friendly-links credentials"><a href="" target="_blank">京公网安备1101010232号</a><span></span><a href="#/" target="_blank">京ICP备16022489号</a></p><p>北京猫眼文化传媒有限公司</p><p>©<span class="my-footer-year"></span> 猫眼电影 </p><div class="certificate"><a href="#" target="_blank"><img src="/moviemachine/e54374ccf134d1f7b2c5b075a74fca525326.png"></a><a href="#" target="_blank"><img src="/moviemachine/805f605d5cf1b1a02a4e3a5e29df003b8376.png"></a><a href="h#" target="_blank"><img src="/scarlett/3cd2a9b7dc179531d20d27a5fd686e783787.png"></a></div></div><script src="js/ajax.js"></script><script src="js/mock-min.js"></script><script src="js/server.js"></script><script src="js/index.js"></script></body></html>
