900字范文 > HTML5期末大作业：电影网站设计——网上电影票预订网站 HTML+CSS+JavaScript 学

HTML5期末大作业：电影网站设计——网上电影票预订网站 HTML+CSS+JavaScript 学

时间：2020-06-24 16:15:59

HTML5期末大作业：在线电影网站设计——网上电影票预订网站 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

🧡作者主页

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：在线电影网站设计——网上电影票预订网站 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、完整源码六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html><head><title>List</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="" /><script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);<link href='/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'><link href="/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900" rel="stylesheet"><link href='/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'></head><body><div id="demo-1" class="banner-inner"><div class="banner-inner-dott"><div class="header-w3-agileits" id="home"><div class="inner-header-agile part2"><nav class="navbar navbar-default"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><h1><a href="index.html"><span>M</span>ovies <span>P</span>ro</a></h1></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="index.html">Home</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Genre <b class="caret"></b></a><ul class="dropdown-menu multi-column columns-3"><li><div class="col-sm-4"><ul class="multi-column-dropdown"><li><a href="genre.html">Action</a></li><li><a href="genre.html">Biography</a></li><li><a href="genre.html">Crime</a></li><li><a href="genre.html">Family</a></li><li><a href="horror.html">Horror</a></li><li><a href="genre.html">Romance</a></li><li><a href="genre.html">Sports</a></li><li><a href="genre.html">War</a></li></ul></div><div class="col-sm-4"><ul class="multi-column-dropdown"><li><a href="genre.html">Adventure</a></li><li><a href="comedy.html">Comedy</a></li><li><a href="genre.html">Documentary</a></li><li><a href="genre.html">Fantasy</a></li><li><a href="genre.html">Thriller</a></li></ul></div><div class="col-sm-4"><ul class="multi-column-dropdown"><li><a href="genre.html">Animation</a></li><li><a href="genre.html">Costume</a></li><li><a href="genre.html">Drama</a></li><li><a href="genre.html">History</a></li><li><a href="genre.html">Musical</a></li><li><a href="genre.html">Psychological</a></li></ul></div><div class="clearfix"></div></li></ul></li><li><a href="series.html">tv - series</a></li><li class="active"><a href="news.html">news</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Country <b class="caret"></b></a><ul class="dropdown-menu multi-column columns-3"><li><div class="col-sm-4"><ul class="multi-column-dropdown"><li><a href="genre.html">Asia</a></li><li><a href="genre.html">France</a></li><li><a href="genre.html">Taiwan</a></li><li><a href="genre.html">United States</a></li></ul></div><div class="col-sm-4"><ul class="multi-column-dropdown"><li><a href="genre.html">China</a></li><li><a href="genre.html">HongCong</a></li><li><a href="genre.html">Japan</a></li><li><a href="genre.html">Thailand</a></li></ul></div><div class="col-sm-4"><ul class="multi-column-dropdown"><li><a href="genre.html">Euro</a></li><li><a href="genre.html">India</a></li><li><a href="genre.html">Korea</a></li><li><a href="genre.html">United Kingdom</a></li></ul></div><div class="clearfix"></div></li></ul></li><li><a href="list.html">A - z list</a></li><li><a href="contact.html">Contact</a></li></ul></div><div class="clearfix"> </div></nav><div class="w3ls_search"><div class="cd-main-header"><ul class="cd-header-buttons"><li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li></ul> </div><div id="cd-search" class="cd-search"><form action="#" method="post"><input name="Search" type="search" placeholder="Search..."></form></div></div></div> </div></div></div><div class="clearfix"> </div></div><div class="w3-agileits-news-one"><div class="wthree-news-img"><a href="news-single.html"><img src="images/m5.jpg" alt=""></a></div><div class="wthree-news-info"><h5><a href="news-single.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h5><div class="agile-post">by <a href="#" title="w3ls" rel="author">Admin</a> onOct 30, with <a href="#">5 comments</a></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus tristique bibendum.Sed tristique mattis fermentum. Etiam semper aliquet massa, id tempus massa mattis eget.</p><a class="new-more" href="news-single.html">Read More</a></div><div class="clearfix"> </div></div><div class="w3-agileits-news-one"><div class="wthree-news-img"><a href="news-single.html"><img src="images/m6.jpg" alt=""></a></div><div class="wthree-news-info"><h5><a href="news-single.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h5><div class="agile-post">by <a href="#" title="w3ls" rel="author">Admin</a> onOct 30, with <a href="#">4 comments</a></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae eros eget tellus tristique bibendum.Sed tristique mattis fermentum. Etiam semper aliquet massa, id tempus massa mattis eget.</p><a class="new-more" href="news-single.html">Read More</a></div><div class="clearfix"> </div></div></div><div class="col-md-4 latest-news-agile-right-content"><h4 class="side-t-w3l-agile">For Latest <span>Movies</span></h4><div class="side-bar-form"><form action="#" method="post"><input type="search" name="email" placeholder="Search here...." required="required"><input type="submit" value=" "></form></div><h4 class="side-t-w3l-agile">Hot <span>Topics</span></h3><ul class="side-bar-agile"><li><a href="news-single.html">John Abraham, Sonakshi Sinha and Tahir ...</a><p>Sep 29, </p></li><li><a href="news-single.html">Romantic drama about two people finding out that love</a><p>Feb 3, </p></li><li><a href="news-single.html">Storks have moved on from delivering babies to packages ...</a><p>Aug 1, </p></li><li><a href="news-single.html">John Abraham, Sonakshi Sinha and Tahir ...</a><p>Sep 29, </p></li><li><a href="news-single.html">John Abraham, Sonakshi Sinha and Tahir ...</a><p>Sep 29, </p></li></ul><h4 class="side-t-w3l-agile">Latest <span>Trailer</span></h3><div class="video_agile_player sidebar-player"><div class="video-grid-single-page-agileits"><div data-video="fNKUgX8PhMA" id="video1"> <img src="images/22.jpg" alt="" class="img-responsive"> <div id="play"></div></div></div><div class="player-text side-bar-info"><p class="fexi_header">Me Before You </p><p class="fexi_header_para"><span class="conjuring_w3">Story Line<label>:</label></span>Me Before You Official Trailer #2 () - Emilia Clarke, Sam Claflin Movie HDA girl in a small town forms an unlikely....</p><p class="fexi_header_para"><span>Release On<label>:</label></span>Feb 3, </p><p class="fexi_header_para"><span>Genres<label>:</label> </span><a href="genre.html">Drama</a> | <a href="genre.html">Adventure</a> | <a href="genre.html">Family</a></p><p class="fexi_header_para fexi_header_para1"><span>Star Rating<label>:</label></span><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a><a href="#"><i class="fa fa-star" aria-hidden="true"></i></a><a href="#"><i class="fa fa-star-half-o" aria-hidden="true"></i></a><a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a><a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a></p></div></div><div class="clearfix"> </div><div class="agile-info-recent"><h4 class="side-t-w3l-agile">Latest <span>Trailer</span></h4><div class="w3ls-recent-grids"><div class="w3l-recent-grid"><div class="wom"><a href="news-single.html"><img src="images/m12.jpg" alt=" " class="img-responsive"></a></div><div class="wom-right"><h5><a href="news-single.html">Lorem Integer rutrum</a></h5><p>Mauris fermentum dictum magna. Sed laoreet aliquam leo. Ut tellus dolor, dapibus eget.</p><ul class="w3l-sider-list"><li><i class="fa fa-clock-o" aria-hidden="true"></i>On Jan 12, </li><li><i class="fa fa-eye" aria-hidden="true"></i> 2602</li></ul></div><div class="clearfix"> </div></div><div class="w3l-recent-grid"><div class="wom"><a href="news-single.html"><img src="images/m13.jpg" alt=" " <div class="clearfix"> </div></div></div><div class="col-md-2 footer-grid"><h4 class="b-log"><a href="index.html"><span>M</span>ovies <span>P</span>ro</a></h4><div class="footer-grid-instagram"><a href="single.html"><img src="images/m1.jpg" alt=" " class="img-responsive"></a></div><div class="footer-grid-instagram"><a href="single.html"><img src="images/m2.jpg" alt=" " class="img-responsive"></a></div><div class="footer-grid-instagram"><a href="single.html"><img src="images/m3.jpg" alt=" " class="img-responsive"></a></div><div class="footer-grid-instagram"><a href="single.html"><img src="images/m4.jpg" alt=" " class="img-responsive"></a></div><div class="footer-grid-instagram"><a href="single.html"><img src="images/m5.jpg" alt=" " class="img-responsive"></a></div><div class="footer-grid-instagram"><a href="single.html"><img src="images/m6.jpg" alt=" " class="img-responsive"></a></div><div class="clearfix"> </div></div><div class="clearfix"> </div><ul class="bottom-links-agile"><li><a href="icons.html" title="Font Icons">Icons</a></li> <li><a href="short-codes.html" title="Short Codes">Short Codes</a></li> <li><a href="contact.html" title="contact">Contact</a></li> </ul></div><h3 class="text-center follow">Connect <span>Us</span></h3><ul class="social-icons1 agileinfo"><li><a href="#"><i class="fa fa-facebook"></i></a></li><li><a href="#"><i class="fa fa-twitter"></i></a></li><li><a href="#"><i class="fa fa-linkedin"></i></a></li><li><a href="#"><i class="fa fa-youtube"></i></a></li><li><a href="#"><i class="fa fa-google-plus"></i></a></li></ul></div></div><div class="w3agile_footer_copy"></body></html>