300字范文 > web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人

web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人

时间：2019-10-01 16:13:15

HTML5期末大作业：电影网站设计——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作

文章目录

HTML5期末大作业：电影网站设计——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作一、作品展示二、文件目录三、代码实现四、学习资料

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><meta name="author" content="order by /" /><title>Demo</title><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="css/iconfont.css"></head><body style=" height: 2000px; "><div id="header"><div class="header-top"><div class="auto-width"><h1 class="logo fl"><a href="#"><img src="picture/logo.png" alt="#"></a></h1><div class="search-box fl"><form action="#"><input type="text" class="fl search-text" placeholder="Search here..."><button class="fl search-btn"><i class="iconfont icon-search"></i></button></form><div class="search-feedback"><span class="search-hot">今日热搜</span><div class="search-menu"><a href="#" class="item item-cur"><span>1</span><em>OverWatch</em></a><a href="#" class="item item-cur"><span>2</span><em>电影知道答案</em></a><a href="#" class="item item-cur"><span>3</span><em>S6</em></a><a href="#" class="item"><span>4</span><em>夏目友人帐</em></a><a href="#" class="item"><span>5</span><em>微小而确实的幸福</em></a><a href="#" class="item"><span>6</span><em>神盾局特工</em></a><a href="#" class="item"><span>7</span><em>天凉好个秋</em></a></div></div></div><ul class="header-guide fr"><li class="guide-item download"><a href="#"><i class="iconfont icon-app"></i><span>下载客户端</span></a><div class="guide-hover"><img src="picture/app-download.png" alt="#"></div></li><li class="guide-item login"><a href="#">登录/注册</a></li><li class="guide-item history"><a href="#"><i class="iconfont icon-history"></i></a><div class="guide-hover"><span class="text">尚未记录任何历史信息。</span><a href="#" class="more">More</a></div></li><li class="guide-item upload"><a href="#"><i class="iconfont icon-upload"></i></a><div class="guide-hover"><ul><li><a href="#">投视频</a></li><li><a href="#">投文章</a></li></ul></div></li><li class="guide-item collect"><a href="#"><i class="iconfont icon-collect"></i></a></li></ul></div></div><div class="header-banner"><a href="#" class="bg"></a><span class="text">这辆车……到底能不能上啊！！！</span><a href="#" class="link"></a></div><li class="slider-menu__item"><a href="#" class="item"><img src="picture/slider-menu__2.jpg" alt="#"><div class="mask-gradient"><p>嗨呀！好气啊！OW堡傻缺集锦</p><div class="text-box"><em>UP: AcFun出品</em><span class="info"><i class="iconfont icon-collect">14.9万</i><i class="iconfont icon-collect">165</i></span></div></div></a></li><li class="slider-menu__item"><a href="#" class="item"><img src="picture/slider-menu__3.jpg" alt="#"><div class="mask-gradient"><p>嗨呀！好气啊！OW堡傻缺集锦</p><div class="text-box"><em>UP: AcFun出品</em><span class="info"><i class="iconfont icon-collect">14.9万</i><i class="iconfont icon-collect">165</i></span></div></div></a></li><li class="slider-menu__item"><a href="#" class="item"><img src="picture/slider-menu__4.jpg" alt="#"><div class="mask-gradient"><p>嗨呀！好气啊！OW堡傻缺集锦</p><div class="text-box"><em>UP: AcFun出品</em><span class="info"><i class="iconfont icon-collect">14.9万</i><i class="iconfont icon-collect">165</i></span></div></div></a></li><li class="slider-menu__item"><a href="#" class="item"><img src="picture/slider-menu__6.jpg" alt="#"><div class="mask-gradient"><p>嗨呀！好气啊！OW堡傻缺集锦</p><div class="text-box"><em>UP: AcFun出品</em><span class="info"><i class="iconfont icon-collect">14.9万</i><i class="iconfont icon-collect">165</i></span></div></div></a></li><li class="slider-menu__item"><a href="#" class="item"><img src="picture/slider-menu__5.jpg" alt="#"><div class="mask-gradient"><p>嗨呀！好气啊！OW堡傻缺集锦</p><div class="text-box"><em>UP: AcFun出品</em><span class="info"><i class="iconfont icon-collect">14.9万</i><i class="iconfont icon-collect">165</i></span></div></div></a></li></ul></section><section class="area clearfix area-recommend"><header class="area-header"><h2 class="title"><img src="picture/area-title__1.gif" alt="#"><b>猴子推荐</b><em>十分好评快来看啦</em></h2></header><div class="area-cont"><div class="area-main fl"><ul class="area-menu fl clearfix"><li class="area-menu__item"><a href="#" class="img"><img src="picture/area-menu__1.jpg" alt="#"><span class="mask"><em class="time">4:47</em></span></a><div class="info"><a href="#" class="title">这只喵技能树突破天际啦!</a><a href="#">匿名版</a><br><a href="#">AC大逃杀</a></p></div><span class="line"></span><div class="item"><h4>反馈</h4><p><a href="#">意见反馈</a><a href="#">举报</a><a href="#">帮助中心</a><br><a href="#">免责声明</a><a href="#">用户协议</a></p></div></div><div class="footer-img fr"><img src="picture/footer-logo.gif" alt="#"></div></div><div class="footer-middle clearfix"><div class="item"><a href="#"><i class="icon icon-1"></i>中国互联网举报中心</a><a href="#"><i class="icon icon-2"></i>网络文化经营单位</a></div><div class="item"><span>京8888888888号</span></div><div class="item"><span>节目制作经营许可证66666666666号</span></div></div><div class="footer-bottom"><img src="picture/logo-gray.png" alt="#"><p>本站不提供任何视听上传服务，所有内容均来自视频分享站点所提供的公开引用资源。********</p></div></div></div><a href="javascript:;" id="back_top" class="iconfont icon-up"></a><script src="js/jquery.min.js"></script><script src="js/script.js"></script><script src="js/sliderbox.js"></script><script src="js/tab.js"></script></body></html>