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
works ( Static effect ) demonstration
1. Pirate king home page
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. 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
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 )~
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 ~
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 !
more HTML Final student assignment article
HTML Final assignment ( download )
More source code
copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225436776S.html
The sidebar is recommended
- Crazy blessing! Tencent boss's "million JVM learning notes", real topic of Huawei Java interview 2020-2021
- JS JavaScript how to get the subscript of a value in the array
- How to implement injection in vuex source code?
- JQuery operation select (value, setting, selected)
- One line of code teaches you how to advertise on Tanabata Valentine's Day - Animation 3D photo album (music + text) HTML + CSS + JavaScript
- An article disassembles the pyramid architecture behind the gamefi outbreak
- BEM - a front-end CSS naming methodology
- [vue3] encapsulate custom global plug-ins
- Error using swiper plug-in in Vue
- Another ruthless character fell by 40000, which was "more beautiful" than Passat and maiteng, and didn't lose BMW
guess what you like
-
Huang Lei basks in Zhang Yixing's album, and the relationship between teachers and apprentices is no less than that in the past. Netizens envy Huang Lei
-
He was cheated by Wang Xiaofei and Li Chengxuan successively. Is an Yixuan a blessed daughter and not a blessed home?
-
Zhou Shen sang the theme song of the film "summer friends and sunny days" in mainland China. Netizen: endless aftertaste
-
Pink is Wangyuan online! Back to the peak! The new hairstyle is creamy and sassy
-
Front end interview daily 3 + 1 - day 858
-
Spring Webflux tutorial: how to build reactive web applications
-
[golang] walk into go language lesson 24 TCP high-level operation
-
August 23, 2021 Daily: less than three years after its establishment, Google dissolved the health department
-
The female doctor of Southeast University is no less beautiful than the female star. She has been married four times, and her personal experience has been controversial
-
There are many potential safety hazards in Chinese restaurant. The top of the program recording shed collapses, and the artist will fall down if he is careless
Random recommended
- Anti Mafia storm: He Yun's helpless son, Sun Xing, is destined to be caught by his dry son
- Introduction to flex flexible layout in CSS -- learning notes
- CSS learning notes - Flex layout (Ruan Yifeng tutorial summary)
- Today, let's talk about the arrow function of ES6
- Some thoughts on small program development
- Talk about mobile terminal adaptation
- Unwilling to cooperate with Wang Yibo again, Zhao Liying's fans went on a collective strike and made a public apology in less than a day
- JS function scope, closure, let, const
- Zheng Shuang's 30th birthday is deserted. Chen Jia has been sending blessings for ten years. Is it really just forgetting to make friends?
- Unveil the mystery of ascension
- Asynchronous solution async await
- Analysis and expansion of Vue infinite scroll source code
- Compression webpack plugin first screen loading optimization
- Specific usage of vue3 video play plug-in
- "The story of huiyeji" -- people are always greedy, and fairies should be spotless!
- Installing Vue devtool for chrome and Firefox
- Basic usage of JS object
- 1. JavaScript variable promotion mechanism
- Two easy-to-use animation JS that make the page move
- Front end Engineering - scaffold
- Java SQL Server intelligent fixed asset management, back end + front end + mobile end
- Mediator pattern of JavaScript Design Pattern
- Array de duplication problem solution - Nan recognition problem
- New choice for app development: building mobile applications using Vue native
- New gs8 Chengdu auto show announces interior Toyota technology blessing
- Vieira officially terminated his contract and left the team. The national security club sent blessings to him
- Less than 200000 to buy a Ford RV? 2.0T gasoline / diesel power, horizontal bed / longitudinal bed layout can be selected
- How does "heart 4" come to an end? Pinhole was boycotted by the brand, Ma Dong deleted the bad comments, and no one blessed him
- We are fearless in epidemic prevention and control -- pay tribute to the front-line workers of epidemic prevention!
- Front end, netty framework tutorial
- Xiaomi 11 | miui12.5 | android11 solves the problem that the httpcanary certificate cannot be installed
- The wireless charging of SAIC Roewe rx5 plus is so easy to use!
- Upload and preview pictures with JavaScript, and summarize the most complete mybatis core configuration file
- [25] typescript
- CSS transform Complete Guide (Second Edition) flight.archives 007
- Ajax foundation - HTTP foundation of interview essential knowledge
- Cloud lesson | explain in detail how Huawei cloud exclusive load balancing charges
- Decorator pattern of JavaScript Design Pattern
- [JS] 10. Closure application (loop processing)
- Left hand IRR, right hand NPV, master the password of getting rich