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>