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

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

2021-08-22 22:54:38 @. code out the future

HTML Final homework ~ Pirate king student web design homework (HTML+CSS+JavaScript)

This page mainly introduces the Japanese super popular comics that have attracted much attention in recent years One piece The author is rongichiro omida Pirate king home page Details Video introduction The article brief introduction Cartoon appreciation Several main parts, in which the cartoon introduction introduces the background and other environment of the 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 making

About pirate king animation HTML Web page creation ,, Big homework A+ level !! Main features : With sound effects , Five pages, five styles . Each has a different beauty ~
With the development of animation industry , The continuous development of animation culture , Animation has developed from the low age group to the national animation ,
The animation industry chain has been gradually improved , 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 in this field , Get more resources that can meet their various hobbies , The painting man Pianpian network includes animation and Animation Forum , Meet the needs of the majority of animation fans , Gradually formed a cultural characteristic of animation .

works ( Dynamic effect ) demonstration

 Insert picture description here

works ( Static effect ) demonstration

1. Pirate king home page

 Insert picture description here

2. Pirate King Information

 Insert picture description here

3. Details

 Insert picture description here

2. Pirate king video  Insert picture description here

File directory

 Insert picture description here

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. The head area starts  -->
    <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"> information </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 pirate brothers 》-- Diffuse point network "}'>
            <source src="../media/brother.mp4" type="video/mp4" />
             Your browser does not support it 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 the top effect js -->
    <script type="text/javascript"> returntop(); sidenavrolling(); </script>
    <!--  The 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 To prepare 15025210 Number </p>
                <a href="javascript:;" class="app"> download APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt> Let's look at it </dt>
                    <dd><a href="javascript:;"> About </a></dd>
                    <dd><a href="javascript:;"> Management team </a></dd>
                    <dd><a href="javascript:;"> Member 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 sign up </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 can't be played </a></dd>
                </dl>
                <dl>
                    <dt> partners </dt>
                    <dd><a href="javascript:;"> Partner organization </a></dd>
                    <dd><a href="javascript:;"> Cooperative enterprise </a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>

Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( Use for free forever )

1. You don't need to buy a server to deploy online , Your connection is accessible all over the world , Here is a necessary artifact for programmers ~
Plugins are integrated with super easy-to-use plug-ins , Download and install for free , Simple and easy to understand , It's an artifact ~ If necessary, it can be found in the article ↓ Xiagong Z Number acquisition

2. Is to do your code effect well , Deploy online , Send links to others , You can let the other party click in through your connection , You can see the effect of your web page , Both computer and mobile terminals are OK ! ( Otherwise, people will send files when they see your web page , The experience is not very good ~)

1.1 Deployment process

 Insert picture description here

1.2 wow ~ Deployment success

wow ~ Deployment success ! Deploy your written page online , People all over the world can access your web page through links ( Free forever )~

 Insert picture description here

front end Zero basic entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~
 Insert picture description here


The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

* 3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here

more HTML Final student assignment article

1.HTML The students finish their homework at the end of the term ~html+css+javascript Imitation Dingdang movie online website ( The function is all ready )

2.HTML Final student homework ~html+css+javascript Cat's eye movie online website ( The function is all ready )

3.HTML Final student homework (9 set )html+css+javascript Imitation of Jingdong 、 Tmall 、 clothing 、 Major e-commerce templates ( University graduation project )

4.HTML Final homework ~ Pirate king Qiaoba special cartoon student web page setting homework source code (HTML+CSS+JavaScript)

HTML Final assignment ( download )

1.web Big homework for the last class at the front end ~html Student information management system template

2.web Big homework for the last class at the front end ~HTML School background user login interface template

3.web Big homework for the last class at the front end ,~ Millet official website vertical classification navigation menu

4.web Big homework for the last class at the front end ~HTML5 College Students' online check-in system response template

5.web Big homework for the last class at the front end ~ Self taught University official website HTML Templates

6.web Big homework for the last class at the front end ~ Xiaomi mall official website home page template

7.web Big homework for the last class at the front end - green IT Technology online education responsive template

8.web Big homework for the last class at the front end ~HTML Website template of education and training institutions

9.web Front end final homework html+css+javascript University Experimental Teaching Demonstration Center HTML Website template

10.web Big homework for the last class at the front end ~HTML5 Website template of responsive children's dance training school

11.web Big homework for the last class at the front end ~ Red education and training studio HTML Website template

12.HTML Final assignment - Green fruit and vegetable mall shopping network template (HTML+CSS+JavaScript)

More source code

100 Paragraph confession source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225436776S.html

Random recommended