1000字范文 > DIV布局——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品

DIV布局——人电影网站(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品

时间：2022-04-25 05:09:26

HTML5期末大作业：网页制作代码网站设计——人电影网站(5页) HTML+CSS+JavaScript

文章目录

HTML5期末大作业：网页制作代码网站设计——人电影网站(5页) HTML+CSS+JavaScript一、作品展示二、文件目录三、代码实现四、完整源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html><head><meta charset="utf-8"><title>电影播放</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.3.1.min.js"></script><script src="js/bootstrap.min.js"></script></head><body><center><nav class="navbar navbar-default " role="navigation"><div class="container-fluid "><div class="navbar-header"><a class="navbar-brand" href="#">电影网LOGO</a></div><ul class="nav navbar-nav navbar-right"><li><a href="register.html"><span class="glyphicon glyphicon-user"></span> 注册</a></li><li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li></ul></div></nav><div style="width: 75%; min-width: 1150px;max-width: 1320px;"><nav class="navbar navbar-inverse navbar-static-top " role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" href="index.html">首页</a></div><div><ul class="nav navbar-nav"><li><a href="#">电影</a></li><li><a href="#">音乐MV</a></li><li><a href="#">视频短片</a></li><li><a href="#">公开课</a></li></ul><div class="clear"><form class="navbar-form navbar-right" role="search"><div class="form-group"><input type="text" class="form-control" placeholder="输入电影名称..."></div><button type="submit" class="btn btn-default ">搜索电影</button></form></div></div></div><div class="container-fluid navbar-default "><div><ul class="nav navbar-nav"><li><a href="#">电影</a></li><li><a href="#">国语电影</a></li><li><a href="#">喜剧片</a></li><li><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><ul class="nav navbar-nav navbar-right"><li><a href="#">评分最高</a></li><li><a href="#">最热门</a></li></ul></div></div></nav><div class="col-lg-9"><div class="media"><div class="media-left media-top"><div class="media-object" style="width: 600px;"><div class="embed-responsive embed-responsive-16by9 "><iframe class='embed-responsive-item ' src="img/view.mp4" allowtransparency="true" allowfullscreen="true" allowfullscreenInteractive="true" scrolling="no" border="0" frameborder="0"></iframe></div></div></div><div class="media-body text-left"><div><h4>反贪风暴4()</h4><small>HD1280高清国语|粤语中字版 </small></div><hr /><p>别名：P Storm</p><p>演员：<a href="#">古天乐</a><a href="#"> 林家栋</a><a href="#"> 郑嘉颖 </a><a href="#"> 林峯 </a></p><p>导演：<a href="#">林德禄</a> </p><div style="width: 200px;"><div class="pull-left">类型：动作</div><div class="pull-right">语言：国语</div></div><div style="width: 200px;"><div class="pull-left">地区：香港</div><div class="pull-right">片长： 100</div></div></div><div class="text-left"><h4>影片简介</h4><small>廉政公署收到报案人廖雨萍（周秀娜饰）的实名举报，举报正在坐牢的富二代曹元元（林峯饰）涉嫌行贿监狱里的监督沈济全（谭耀文饰）以及惩教员，首席调查主任陆志廉（古天乐饰）决定深入虎穴，卧底狱中。在监狱里，被陆志廉送入监狱的前警司黄文彬（林家栋饰）以及曹元元两大帮派势成水火，陆志廉趁机接近曹元元取得信任。同时监狱外的廉政公署总调查主任程德明（郑嘉颖饰）、国内反贪局行动处处长洪亮（丁海峰饰）也陆港联手，通力合作，最终成功破获贪腐行贿大案。</small></div></div><hr><a href="#" class="navbar-left"><span class="glyphicon glyphicon-film"></span> 猜您喜欢</a><br /><hr /><table class="table table-bordered text-center" ><thead><tr><th><a href="#"><img src="img/001.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/002.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/003.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/004.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/005.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th></tr></thead><tbody><tr><td><a href="#">反贪风暴4</a></td><td><a href="#">复仇者联盟4：终局之战</a></td><td><a href="#">大黄蜂</a></td><td><a href="#">惊奇队长</a></td><td><a href="#">X战警：黑凤凰</a></td></tr></tbody></table><table class="table table-bordered text-center" ><thead><tr><th><a href="#"><img src="img/001.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/002.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/003.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/004.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th><th><a href="#"><img src="img/005.jpg" class="img-thumbnail" alt="Cinque Terre"></a></th></tr></thead><tbody><tr><td><a href="#">反贪风暴4</a></td><td><a href="#">复仇者联盟4：终局之战</a></td><td><a href="#">大黄蜂</a></td><td><a href="#">惊奇队长</a></td><td><a href="#">X战警：黑凤凰</a></td></tr></tbody></table></div><div class="col-lg-3"><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#zjgx" data-toggle="tab">相关影片</a></li></ul><div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="zjgx"><ul class="list-group "><li class="list-group-item"><span class="badge">热</span>[综艺] 心动的信号第二季</li><li class="list-group-item"><span class="badge">热</span>[动漫] 贤惠仙狐小姐</li><li class="list-group-item"><span class="badge">热</span>[大陆剧] 铁血茶城</li><li class="list-group-item">[大陆剧] 爱是欢乐的源泉</li><li class="list-group-item">[大陆剧] 少年派</li><li class="list-group-item">[外语] 阿涅斯论瓦尔达</li><li class="list-group-item">[大陆剧] 铁血茶城</li><li class="list-group-item">[大陆剧] 爱是欢乐的源泉</li><li class="list-group-item">[大陆剧] 少年派</li><li class="list-group-item">[外语] 阿涅斯论瓦尔达</li><li class="list-group-item">[大陆剧] 铁血茶城</li><li class="list-group-item">[大陆剧] 爱是欢乐的源泉</li><li class="list-group-item">[大陆剧] 少年派</li><li class="list-group-item">[外语] 阿涅斯论瓦尔达</li></ul></div></div></div></div></center></body></html>