HTML final assignment ~ HTML web page production of pirate king animation (five pages in total, with five styles)

Posted by praeses on Thu, 27 Jan 2022 18:25:45 +0100

HTML final assignment ~ pirate king student web design assignment (HTML+CSS+JavaScript)

This page mainly introduces the super popular cartoon pirate king in Japan, which has attracted much attention in recent years. The author is rongichiro owada, pirate king home page details video introduction article introduction cartoon appreciation several main parts. The cartoon introduction introduces the background and other environment of this cartoon. Through these, we can roughly understand the content of this cartoon and why it is so attractive In the appreciation of comics, we can probably see some selected comics!

Introduction to web page production

On the pirate king animation HTML web page production, big homework A + level!! Main features: with sound effects, five Web pages and five styles. Each has A different sense of beauty~
With the continuous development of animation industry and animation culture, animation has developed from the low age group to the national animation,
The animation industry chain has been gradually improved, and more and more fans like animation. Of course, the market demand is also growing. More and more animation lovers hope to get more animation resources and more resource concentration places that can meet their various hobbies in this field, while huaman Pianpian network includes animation and Animation Forum, which meets the needs of the majority of animation fans and gradually forms a cultural characteristic of animation.

Work (dynamic effect) demonstration

Work (static effect) demonstration

1. Pirate king Homepage

2. Pirate king information

3. Details

2. Pirate king video

File directory

code implementation

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video playback</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>
    <!-- Video playback module -->
    <!-- 1.Head area start -->
    <div class="header w">
        <div class="header-first">
            <!-- logo part -->
            <img src="../images/logo.png" alt="" class="logo">
            <p class="mylogo">ONE PIECE</p>
            <!-- Left navigation bar section -->
            <ul class="lnav-box">
                <li>
                    <div class="box">
                        <div class="front">home page</div>
                        <a href="index.html">
                            <div class="bottom">get into</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <div class="front">periphery</div>
                        <a href="javascript:;">
                            <div class="bottom">get into</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <div class="front">real-time info</div>
                        <a href="content.html">
                            <div class="bottom">get into</div>
                        </a>
                    </div>
                </li>
            </ul>
            <!-- Search box section -->
            <div class="search">
                <input type="text" placeholder="Please enter what you are looking for">
                <button></button>
            </div>
            <!-- Right navigation bar section -->
            <div class="rnav-box">
                <li>
                    <div class="box">
                        <a href="javascript:;">
                            <div class="front">history</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <a href="javascript:;">
                            <div class="front">Collection</div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <a href="javascript:;">
                            <div class="front">news</div>
                        </a>
                    </div>
                </li>
            </div>
            <!-- User name module -->
            <div class="user">
                <img src="../images/xin.png" alt="">
            </div>
        </div>
    </div>
    <!-- Ceiling effect js -->
    <script type="text/javascript">
        headerrolling();
    </script>
    <!-- End of head area -->
    <div class="zy_media w goods banner">
        <video poster="test.jpg" data-config='{"mediaTitle": "<"Three brothers of pirates"--Diffuse point network"}'>
            <source src="../media/brother.mp4" type="video/mp4" />
            Your browser does not support HTML5 video
        </video>
    </div>
    <script>
        zymedia('video')
    </script>
    <!-- menu bar -->
    <div class="sidenav">
        <ul>
            <li class="contact">
                <div class="leftcode">
                    <img src="../images/my.jpg" alt="">
                    <p>Scan the code and feed back your suggestions to the author</p>
                </div>
                <a href="javascript:;">
                    <p class="icon-phone"></p>
                    <span class="content">contact us</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <p class="icon-user"></p>
                    <span class="content">Personal Center</span>
                </a>
            </li>
            <li class="contact">
                <div class="leftcode">
                    <img src="../images/yong.png" alt="">
                    <p>Scan the code and ask the customer service for relevant questions</p>
                </div>
                <a href="javascript:;">
                    <p class="icon-user-tie"></p>
                    <span class="content">Manual customer service</span>
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <p class="icon-bullhorn"></p>
                    <span class="content">Latest announcement</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" id="toTop">
                    <p class="icon-eject"></p>
                    <span class="content">Back to the top</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- Back to top effect js -->
    <script type="text/javascript">
        returntop();
        sidenavrolling();
    </script>
    <!-- tail -->
    <div class="footer w">
        <div class="w">
            <div class="left">
                <img src="../images/onepiece.png" alt="">
                <p>Mandiankan is committed to providing the latest and best pirate king information and videos for sea fans.<br />
                    © 2017 year XTCG Inc.All rights reserved.-Shanghai ICP Bei 15025210</p>
                <a href="javascript:;" class="app">download APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>About diffuse point</dt>
                    <dd><a href="javascript:;">about</a></dd>
                    <dd><a href="javascript:;">Management team</a></dd>
                    <dd><a href="javascript:;">Membership services</a></dd>
                    <dd><a href="javascript:;">Join us</a></dd>
                    <dd><a href="javascript:;">help</a></dd>
                </dl>
                <dl>
                    <dt>Novice guide</dt>
                    <dd><a href="javascript:;">How to register</a></dd>
                    <dd><a href="javascript:;">How to watch</a></dd>
                    <dd><a href="javascript:;">How to become a member</a></dd>
                    <dd><a href="javascript:;">What is integral</a></dd>
                    <dd><a href="javascript:;">What if the video cannot be played</a></dd>
                </dl>
                <dl>
                    <dt>cooperative partner</dt>
                    <dd><a href="javascript:;">Cooperative organization</a></dd>
                    <dd><a href="javascript:;">Cooperative enterprise</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>

Do a good job of web page effect, how to send links to others?

1.1 solution deployment online ~ > deployment online tool (permanent free use)

1. You can deploy online without buying a server, and the world can access your connection. Here is a necessary artifact for programmers~
The plug-in integrates super easy-to-use plug-ins, which can be downloaded and installed for free. It is simple and easy to understand. It is an artifact ~ you can get it under the public Z number at the bottom of the article ↓

2. After your code effect is completed, deploy it online and send the link to others, so that the other party can click in through your connection and see your web page effect. Both computer and mobile phones can be used! (otherwise, when others see your web page, they have to send files, so the experience is not very good ~)

1.1 deployment process

1.2 wow ~ successful deployment

Wow ~ deployment succeeded! After the page you have written is deployed online, people all over the world can access your web page through links (permanent free use)~

A complete set of front-end zero basic introduction to advanced (Video + source code + development software + learning materials + interview questions) (Tutorial)

Suitable for children's shoes from entry to advanced~

Source code acquisition

❉ ~ pay attention to me and praise the blog ~ bring you up knowledge every day!

❉ 1. See here, with the support of [praise + praise + collection] three companies, your "praise, praise and collection" is the driving force of my creation.

❉ 2. Pay attention to me ~ take you to learn every day: various front-end plug-ins, 3D cool effects, picture display, text effects, as well as the whole station template, college student graduation template, final assignment template, etc! "There are many front-end developers here to discuss the front-end Node knowledge and learn from each other"!

❉ 3. You can learn from each other about the above technical issues. You can pay attention to ↓ public Z number to get more source code!