300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+cs

HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+cs

时间:2019-07-05 02:35:12

相关推荐

HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+cs

HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码

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

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

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

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

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

文章目录

HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、完整源码六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, maximum-scale=1"><title>Home</title><link rel="icon" href="favicon.png" type="image/png"><link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"><link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" /><link href="css/style.css" rel="stylesheet" type="text/css"> <link href="css/font-awesome.css" rel="stylesheet" type="text/css"> <link href="css/animate.css" rel="stylesheet" type="text/css"><!--[if lt IE 9]><script src="js/respond-1.1.0.min.js"></script><script src="js/html5shiv.js"></script><script src="js/html5element.js"></script><![endif]--></head><body><div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel" data-slide-to="0" class="active"></li><li data-target="#carousel" data-slide-to="1"></li><li data-target="#carousel" data-slide-to="2"></li></ol><!-- Carousel items --><div class="carousel-inner"><div class="active item"><div class="caption zoomIn wow animated"> <h2>海贼王 <br/><strong>海贼王,我当定了</strong></h2></div><img class="" src="img/timg (5).gif" width="1920px" height="800px"alt=""></div><div class="item"><div class="caption zoomIn wow animated"> <h2>かいぞくおう<br/><strong>かいぞくおう になる</strong></h2></div><img class="" src="img/timg (1).gif" width="1920px" height="800px"alt=""></div><div class="item"><div class="caption zoomIn wow animated"> <h2>ONE PIECE<br/><strong>One Piece, I'm in.</strong></h2></div><img class="" src="img/slide2.gif" width="1920px" height="800px"alt=""></div></div><!-- Carousel nav --><a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a><a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a></div><!--Header_section--><header id="header_wrapper"><div class="container"><div class="header_box"><!--<div class="logo"><a href="#">Resume</a></div>--><nav class="navbar navbar-inverse" role="navigation"><div class="navbar-header"><button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button></div><div id="main-nav" class="collapse navbar-collapse navStyle"><ul class="nav navbar-nav" id="mainNav"><li class="active"><a href="#carousel" class="scroll-link">首页</a></li><li><a href="#aboutUs" class="scroll-link">介绍</a></li><li><a href="#service" class="scroll-link">人物简介</a></li><li><a href="#Portfolio" class="scroll-link">人物集</a></li> <li><a href="#experience" class="scroll-link">时间线</a></li> <li><a href="#contact" class="scroll-link">待续……</a></li></ul></div></nav></div></div></header><!--Header_section--> <section id="aboutUs"><!--Aboutus--><div class="inner_wrapper about-us aboutUs-container fadeInLeft animated wow"><div class="container"><h2>《海贼王》 ”かいぞくおう“</h2><h6>尾田荣一郎创作的漫画作品</h6><div class="inner_section"><div class="row"><div class="col-md-6"> <img class="img-responsive" src="img/316040.gif" align=""> </div><div class="col-md-6"><h3>作品简介</h3><p>故事讲述了想成为海贼王的路飞,误食了海贼香克斯收藏的橡胶恶魔果实,而变成橡胶人,恶魔果实的副作用却使他永远不能游泳。不过他的理想仍然没有改变——成为海贼王,并且找到传说中哥尔·D·罗杰的秘宝-One Piece,冒险就此开始了。</p> <p>误食“橡胶果实”的路飞怀揣着对这个世界的憧憬和对自己成为海贼王梦想的执著,路飞出海了。这一路上还真让他找到了许多身怀绝技的朋友:目标成为世界第一剑客的索隆,想绘画出世界地图的航海士娜美,想找到all blue的海上厨师香吉士,特别善于说大话但想成为狙击王的乌索普,想成为最强医生的萌萌哒的船医乔巴,成熟富有女人味的考古学家罗宾,以及顶级的船匠改造人弗兰奇,和立志与鲸鱼拉布重逢的骷髅音乐家布鲁克。路飞一伙一路千辛万苦地努力着,而由此开始One Piece的故事将要完全展开了</p><ul class="about-us-list"><li class="points">海军军队及世界政府——绝对正义</li> <li class="points">王下七武海——世界政府公认的七位大海贼</li><li class="points">四皇——海上皇帝</li></ul><!-- /.about-us-list --></div></div></div></div> </div></section><!--Aboutus--> <!--Service--><section id="service"><div class="container"><h2>人物简介</h2><h6>草帽海贼团主要成员</h6><div class="service_wrapper"><div class="row"><div class="col-md-3"><div class="service_icon delay-03s animated wow zoomIn"></div> <div> <span><img class="" src="img/11.jpg" width="180px" height="180px" alt=""></div><div class="service_block"><h3 class="animated fadeInUp wow">船长(草帽)—— 蒙奇·D·路飞</h3><p class="animated fadeInDown wow">草帽海贼团船长,路飞的标志性特征是一顶草帽,因此常被直接称呼为草帽小子或草帽路飞。梦想是找到传说中的One Piece,成为海贼王。悬赏金:15亿 </p></div></div><div class="col-md-3"> <div class="service_icon icon2 delay-03s animated wow zoomIn"></div> <div> <span><img class="" src="img/51.jpg" width="180px" height="180px" alt=""></div><div class="service_block"><h3 class="animated fadeInUp wow">海贼猎人(剑士)——罗罗诺亚·索隆</h3><p class="animated fadeInDown wow">草帽一伙中的战斗员,是悬赏过亿武艺高强的三刀流剑士,能够自由操纵三把刀战斗。爱喝酒,爱睡觉,讲义气,海贼第一超级大路痴。悬赏金:三亿两千万 </p></div></div><div class="col-md-3"><div class="service_icon icon3 delay-03s animated wow zoomIn"></div> <div> <span><img class="" src="img/56.jpg" width="180px" height="180px" alt=""></div><div class="service_block"><div class="col-sm-6 news-item right"><div class="news-content"><div class="date"><p>被封五皇</p> </div><h2 class="news-title">新的征程</h2> <span>从此刻出发</span><p>草帽一伙从蛋糕岛逃离后,路飞在世界出名,悬赏金达15亿贝里,被予以"五皇"称号,与此同时路飞前往和之国与索隆一伙聚齐,而此时的世界会议也开始举办,ONE PIECE的故事还在继续……</p><a class="read-more" href="#">ONE PIECE</a></div></div></div></div></div></section></div> </section> <!--Footer--><footer class="footer_wrapper" id="contact"><div class="container"><section class="page_section contact" id="contact"><div class="contact_section"><h2>-ONE PIECE-的故事还在继续……</h2><h6>加入草帽麾下,成为海米的一员!</h6></div><div class="row"><div class="col-lg-4 wow fadeInLeft"><div class="contact_info"><div class="detail"><h4>今后无论发生什么事也好,这个左手上的…都是同伴的记号!</h4><p>——路飞</p></div><div class="detail"><h4>我们绝对要过一个无悔的人生!总有一天,我们要踏上这片海洋,按照自己的梦想去闯荡!我们要过上最自由的人生!</h4><p>——路飞</p></div><div class="detail"><h4> 这顶帽子是我最珍贵的东西,我把它交给你,将来你一定要还给我,当你成为了不起的海贼的时候。</h4><p>——香克斯</p></div> </div><ul class="social_links"><li class="twitter animated bounceIn wow delay-02s"><a href="javascript:void(0)"><i class="fa fa-twitter"></i></a></li><li class="facebook animated bounceIn wow delay-03s"><a href="javascript:void(0)"><i class="fa fa-facebook"></i></a></li><li class="pinterest animated bounceIn wow delay-04s"><a href="javascript:void(0)"><i class="fa fa-pinterest"></i></a></li><li class="gplus animated bounceIn wow delay-05s"><a href="javascript:void(0)"><i class="fa fa-google-plus"></i></a></li> </ul></div><div class="col-lg-8 wow fadeInLeft delay-06s"><div class="form"><input class="input-text" type="text" name="" value="能力" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;"><input class="input-text" type="text" name="" value="信念" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;"><textarea class="input-text text-area" cols="0" rows="0" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;">梦想</textarea><input class="input-btn" type="submit" value="交出你的答卷"></div></div></div></section></div><div class="container"></div></footer><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/jquery-scrolltofixed.js"></script><script type="text/javascript" src="js/jquery.nav.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/jquery.isotope.js"></script><script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script> <script type="text/javascript" src="js/wow.js"></script> <script type="text/javascript" src="js/custom.js"></script></body></html>


四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站


五、完整源码

【百度网盘-源码下载地址】

链接:/s/1T5XeFJ7WE2ASbylHE2sRMA

提取码:8888


六、更多源码

HTML5期末考核大作业源码* 包含个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

HTML5期末大作业:漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例 企业网站制作 计算机毕设网页设计源码

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。