current position:Home>HTML web design and production homework - making cartoon web design 6 pages (HTML + CSS + JavaScript)

HTML web design and production homework - making cartoon web design 6 pages (HTML + CSS + JavaScript)

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

HTML Final homework ~ Make simple cartoon Web Design 6 A page (HTML+CSS+JavaScript)

Student animation web design template download Pirate king college student HTML Web production works Simple cartoon web design finished product dreamweaver Student website template

HTML Web design and production homework - For inclusion register Sign in home page Anime movies Japanese anime China-made cartoon OVA edition Ranking List etc. 8 A page

Introduction to web page making

About animation HTML Web page creation ,,HTML Final assignment, big assignment A+ level !! Main features : With sound effects ,8 Pages 8 A style . 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 .

Experience

As a first encounter HTML Final homework , I stayed up late for several days to make a general, so I want to commemorate , It's imitated First sound animation , Quadratic style , Looks very nice .

Works display

Dynamic effect display

 Insert picture description here

Static effect display

Sign in

 Insert picture description here

register

 Insert picture description here

home page

 Insert picture description here

Anime movies

 Insert picture description here

File directory

 Insert picture description here

Code implementation

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=yes" />
		<title> Chuying animation </title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/index_style.css" />
		<!--  add to js Carousel style  -->
		<style> .addWrap{
      position:relative; width:100%;background:#fff;margin:0; padding:0;} .addWrap .swipe{
     overflow: hidden;visibility: hidden;position:relative;} .addWrap .swipe-wrap{
     overflow:hidden;position:relative;} .addWrap .swipe-wrap > div {
     float: left;width: 100%;position:relative;} #position{
      position:absolute; bottom:0; right:0; padding-right:8px; margin:0; background:#000; opacity: 0.4; width:100%; filter: alpha(opacity=50);text-align:right;} #position li{
     width:10px;height:10px;margin:0 2px;display:inline-block;-webkit-border-radius:5px;border-radius:5px;background-color:#AFAFAF;} #position li.cur{
     background-color:#FF0000;} .img-responsive {
      display: block;} </style>
	<body>
		<div id="contain">
			<!--  overall situation  -->
			<div id="top">
				<!--  Head  -->
				<a>
					<div id="logo">
						<!-- logo picture  -->
						<!-- <a href="#"><img class="logo" src="img/logo.png"></a> -->
					</div>
				</a>
				<div id="search">
					<!--  Search box  -->
					<input type="search" id="search_width" class="search" required="" placeholder="Search">
					<input type="button" id="search_button" class="search" value=" search   Cable " />
				</div>
				<div id="login">
					<!--  Sign in  -->
					<!--  register  -->
					<a href="login.html"><input type="button" class="login" value=" deng   record " /></a>&nbsp;&nbsp;
					<a href="register.html"><input type="button" class="login" value=" notes   book " /></a>
				</div>
			</div>
			<div id="links">
				<!--  The navigation bar  -->
				<span><a href="index.html"><input type="button" class="links_button" value=" The first   page " /></a>
					<a href="movie.html"><input type="button" class="links_button" value=" Anime movies " /></a>
					<a href="j_anime.html"><input type="button" class="links_button" value=" Japanese anime " /></a>
					<a href="#"><input type="button" class="links_button" value=" China-made cartoon " /></a>
					<a href="#"><input type="button" class="links_button" value="OVA edition " /></a>
					<a href="#"><input type="button" class="links_button" value=" Ranking List " /></a></span>
			</div>
			<!-- <div id="banner"> -->
			<!--  Rotate pictures  -->
			<!-- <div id="lunbo"> <img src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px"> <img src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.png" width="1280px" height="300px"> <img src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px"> <img src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px"> <img src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px"> </div> -->
			<div class="addWrap">
				<div class="swipe" id="mySwipe">
					<div class="swipe-wrap">
						<div><a href="javascript:;"><img class="img-responsive" src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px" /></a></div>
						<div><a href="javascript:;"><img class="img-responsive" src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.png" width="1280px" height="300px" /></a></div>
						<div><a href="javascript:;"><img class="img-responsive" src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px" /></a></div>
						<div><a href="javascript:;"><img class="img-responsive" src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px" /></a></div>
						<div><a href="javascript:;"><img class="img-responsive" src="https://img.zcool.cn/community/[email protected]_1l_2o_100sh.jpg" width="1280px" height="300px" /></a></div>
					</div>
				</div>
				<ul id="position">
					<li class="cur"></li>
					<li class=""></li>
					<li class=""></li>
					<li class=""></li>
					<li class=""></li>
				</ul>
			</div>
			<!--  Wheel planting js -->
			<script src="js/swipe.js"></script>
			<!--  Displays the size of the ball position Location js -->
			<script type="text/javascript"> var bullets = document.getElementById('position').getElementsByTagName('li'); var banner = Swipe(document.getElementById('mySwipe'), {
      auto: 2000, continuous: true, disableScroll: false, callback: function(pos) {
      var i = bullets.length; while (i--) {
      bullets[i].className = ' '; } bullets[pos].className = 'cur'; } }); </script>
			<!-- </div> -->
			<div id="content">
				<!--  Content  -->
				<div class="module">
					<div class="module1_1">
						<p id="p1"><a href="#"> Recent updates </a></p>
						<p id="p2"><a href="#"> more </a></p>
					</div>
					<div class="module_1_2">
						<ul>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201810618424440146.jpg" alt=" Sword realm  Alicization piece "></a>
								<p><a href="#" title=" Sword realm  Alicization piece "> Sword realm  Alicization piece </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/20202115591459841.jpg" alt=" The unsuited of demon king college "></a>
								<p><a href="#" title=" The unsuited of demon king college "> The unsuited of demon king college </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/20204117511193265.jpg" alt=" Peter · Greer's sage time "></a>
								<p><a href="#" title=" Peter · Greer's sage time "> Peter · Greer's sage time </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/202068172561760.jpg" alt=" Renting a girlfriend "></a>
								<p><a href="#" title=" Renting a girlfriend "> Renting a girlfriend </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/202032214454763065.jpg" alt=" Yuzaki wants to play !"></a>
								<p><a href="#" title=" Yuzaki wants to play !"> Yuzaki wants to play !</a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201911126265428275.jpg" alt=" There is something wrong with my youth love story Season 3 "></a>
								<p><a href="#" title=" There is something wrong with my love story   End "> There is something wrong with my love story </a></p>
							</li>
						</ul>
					</div>
				</div>
				<div class="module">
					<div class="module1_1">
						<p id="p1"><a href="#"> hot </a></p>
						<p id="p2"><a href="#"> more </a></p>
					</div>
					<div class="module_1_2">
						<ul>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/2020782374465089.jpg" alt=" The second season of different world life from scratch "></a>
								<p><a href="#" title=" The second season of different world life from scratch "> The second season of different world life from scratch </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201911126265428275.jpg" alt=" There is something wrong with my youth love story Season 3 "></a>
								<p><a href="#" title=" There is something wrong with my love story   End "> There is something wrong with my love story </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201810618424440146.jpg" alt=" Sword realm  Alicization piece "></a>
								<p><a href="#" title=" Sword realm  Alicization piece "> Sword realm  Alicization piece </a></p>
							</li>
							<li><a href="#"><img src="http://pic.xiaomingming.org/FileUpload/2050.jpg" alt=" One piece "></a>
								<p><a href="#" title=" One piece "> One piece </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/201762221155776184.jpg" alt=" The brave man of shield becomes famous "></a>
								<p><a href="#" title=" The brave man of shield becomes famous "> The brave man of shield becomes famous </a></p>
							</li>
							<li><a href="#"><img src="http://p.xiaomingming.org/FileUpload/20184421312852362.jpg" alt="OVERLORD Season 3 "></a>
								<p><a href="#" title="OVERLORD Season 3 ">OVERLORD Season 3 </a></p>
							</li>
						</ul>
					</div>

				</div>
			</div>
			<div id="end">
				<!--  The tail  -->

				<div id="information">
					<!--  Related information  -->
					<p> The animation resources provided by this website are collected from major video websites ,
						 This website only provides web Page services , Movie resource storage is not provided ,
						 Nor participate in recording 、 Upload if the link included in this site unintentionally infringes your copyright ,
						 Please contact us via email , We will deal with the relevant contents in time , thank you !</p>
					<P><a href="#"> link : Chuying animation </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="#"> About us </a>&nbsp;<b>|</b>&nbsp;
						<a href="#"> Join us </a>&nbsp;<b>|</b>&nbsp;<a href="#"> Contact us </a>&nbsp;<b>|</b>&nbsp;
						<a href="#"> feedback :[email protected]</a></p>
					<p><a href="#"></a></p>
				</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/20210822225434992v.html

Random recommended