HTML期末大作业~海贼王动漫的HTML网页制作（共五页有五种风格）
作者：互联网
HTML期末大作业~海贼王学生网页设计作业(HTML+CSS+JavaScript)
这次网页主要是介绍在近年来非常受关注的日本超人气漫画 海贼王 作者是尾田荣一郎 海贼王首页 详情资讯 视频介绍 文章简介 漫画赏析 几个主要部分其中漫画简介介绍的是这部漫画的背景等环境 通过这些可以大概了解这部漫画的内容和他为何如此吸引人的原因 在漫画赏析中我们可以大概看到一些漫画精选!
网页制作介绍
关于海贼王动漫的HTML网页制作，，大作业A+水平！！主要特色：附带音效，五个网页五种风格。每个都有不同的美感~
随着动漫产业，动漫文化的不断发展，动漫已经从过去的低年龄层向全民动漫方向发展，
动漫产业链逐步完善，喜欢动漫的爱好者越来越多。当然市场需求量也在不断增长，越来越多的动漫爱好者在这一领域能希望得到更多动漫资源，获得更多的一些能满足他们各种爱好的资源集中地，而画漫翩翩网则包含了动漫和动漫论坛，满足了广大动漫迷的需求，逐渐形成了动漫一种文化特色存在。
作品(动态效果)演示
作品(静态效果)演示
1.海贼王首页
2.海贼王资讯
3.详情资讯
2.海贼王视频
文件目录
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频播放</title>
<link rel="stylesheet" href="../CSS/icomoon/style.css">
<link rel="stylesheet" href="../CSS/zy.media.min.css">
<link rel="stylesheet" href="../CSS/myvideo.css">
<link rel="icon" href="../images/myico.ico" type="image/x-icon">
<script src="../js/zy.media.min.js"></script>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/my.js" type="text/javascript"></script>
</head>
<body>
<!-- 视频播放模块 -->
<!-- 1.头部区域开始 -->
<div class="header w">
<div class="header-first">
<!-- logo部分 -->
<img src="../images/logo.png" alt="" class="logo">
<p class="mylogo">ONE PIECE</p>
<!-- 左导航栏部分 -->
<ul class="lnav-box">
<li>
<div class="box">
<div class="front">首页</div>
<a href="index.html">
<div class="bottom">进入</div>
</a>
</div>
</li>
<li>
<div class="box">
<div class="front">周边</div>
<a href="javascript:;">
<div class="bottom">进入</div>
</a>
</div>
</li>
<li>
<div class="box">
<div class="front">资讯</div>
<a href="content.html">
<div class="bottom">进入</div>
</a>
</div>
</li>
</ul>
<!-- 搜索框部分 -->
<div class="search">
<input type="text" placeholder="请输入你想找的内容">
<button></button>
</div>
<!-- 右导航栏部分 -->
<div class="rnav-box">
<li>
<div class="box">
<a href="javascript:;">
<div class="front">历史</div>
</a>
</div>
</li>
<li>
<div class="box">
<a href="javascript:;">
<div class="front">收藏</div>
</a>
</div>
</li>
<li>
<div class="box">
<a href="javascript:;">
<div class="front">消息</div>
</a>
</div>
</li>
</div>
<!-- 用户名字模块 -->
<div class="user">
<img src="../images/xin.png" alt="">
</div>
</div>
</div>
<!-- 吸顶效果js -->
<script type="text/javascript">
headerrolling();
</script>
<!-- 头部区域结束 -->
<div class="zy_media w goods banner">
<video poster="test.jpg" data-config='{"mediaTitle": "《海贼三兄弟》--漫点网"}'>
<source src="../media/brother.mp4" type="video/mp4" />
您的浏览器不支持HTML5视频
</video>
</div>
<script>
zymedia('video')
</script>
<!-- 菜单栏 -->
<div class="sidenav">
<ul>
<li class="contact">
<div class="leftcode">
<img src="../images/my.jpg" alt="">
<p>扫码将您的建议反馈给作者</p>
</div>
<a href="javascript:;">
<p class="icon-phone"></p>
<span class="content">联系我们</span>
</a>
</li>
<li>
<a href="javascript:;">
<p class="icon-user"></p>
<span class="content">个人中心</span>
</a>
</li>
<li class="contact">
<div class="leftcode">
<img src="../images/yong.png" alt="">
<p>扫码向客服咨询相关疑问</p>
</div>
<a href="javascript:;">
<p class="icon-user-tie"></p>
<span class="content">人工客服</span>
</a>
</li>
<li>
<a href="javascript:;">
<p class="icon-bullhorn"></p>
<span class="content">最新公告</span>
</a>
</li>
<li>
<a href="javascript:void(0)" id="toTop">
<p class="icon-eject"></p>
<span class="content">回到顶部</span>
</a>
</li>
</ul>
</div>
<!-- 回到顶部效果js -->
<script type="text/javascript">
returntop();
sidenavrolling();
</script>
<!-- 尾部 -->
<div class="footer w">
<div class="w">
<div class="left">
<img src="../images/onepiece.png" alt="">
<p>漫点看致力于为海迷们提供最新最好的海贼王资讯和视频。<br />
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
<a href="javascript:;" class="app">下载APP</a>
</div>
<div class="right">
<dl>
<dt>关于漫点看</dt>
<dd><a href="javascript:;">关于</a></dd>
<dd><a href="javascript:;">管理团队</a></dd>
<dd><a href="javascript:;">会员服务</a></dd>
<dd><a href="javascript:;">加入我们</a></dd>
<dd><a href="javascript:;">帮助</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="javascript:;">如何注册</a></dd>
<dd><a href="javascript:;">如何观看</a></dd>
<dd><a href="javascript:;">如何成为会员</a></dd>
<dd><a href="javascript:;">积分是什么</a></dd>
<dd><a href="javascript:;">视频无法播放怎么办</a></dd>
</dl>
<dl>
<dt>合作伙伴</dt>
<dd><a href="javascript:;">合作机构</a></dd>
<dd><a href="javascript:;">合作企业</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
做好的网页效果,如何通过发链接给别人看?
1.1解决部署上线~> 部署上线工具(永久免费使用)
1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~
插件集成了超级多好用的插件，免费下载安装，简单易懂, 简直神器 ~ 需要可在文章 ↓ 下方公Z号获取
2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好哦~)
1.1部署流程
1.2 哇~ 部署成功
哇~ 部署成功! 将你写好的页面部署上线后, 全世界的人都可以通过链接访问到你的网页了(永久免费使用哦)~
前端 零基础入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~
源码获取
❉ ~ 关注我，点赞博文~ 每天带你涨知识!
❉ 1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
❉ 3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !
更多HTML期末学生作业文章
1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)
2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)
3.HTML期末学生大作业（9套）html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)
4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)
HTML期末作业作业(下载)
2.web前端期末节课大作业 ~HTML学校后台用户登录界面模板
4.web前端期末节课大作业~HTML5大学生网上报到系统响应式模板
7.web前端期末节课大作业-绿色IT技术在线教育响应式模板
9.web前端期末结课大作业html+css+javascript大学实验教学示范中心HTML网站模板
10.web前端期末节课大作业 ~HTML5响应式少儿舞蹈培训学校网站模板
11.web前端期末节课大作业~红色教育培训画室HTML网站模板
12.HTML期末作业-绿色果蔬商城购物网模板(HTML+CSS+JavaScript)
更多源码
标签：web,海贼王,五页,作业,动漫,HTML,期末,模板 来源： https://blog.csdn.net/ruan365392777/article/details/118106803