HTML5 final assignment: pet theme website design - cool animal theme responsive web page (5 pages) HTML+CSS+JavaScript

HTML5 final assignment: pet theme website design - cool animal theme responsive web page (5 pages) HTML+CSS+JavaScript final assignment HTML code student web page course design final assignment Download Web page design finished product

1. Near the end of the term, you are still designing your final homework for HTML web pages. Do you feel the teacher's homework requirements are great? Can't you start HTML web page homework? The total number of pages required is too much?
2. No suitable template? And so on. The problems you want to solve can basically meet your needs in this blog post~
3. Original HTML+CSS+JS page design, web college students' web design homework source code, this is a good web page production, the picture is smart, and is very suitable for beginners to learn and use.

Introduction to works

1. Introduction to web works: HTML final college students' web design homework a + level, you can download what you like, and the article page supports mobile PC responsive layout. A total of 5 pages.

2. Web page work editing: this work is the subject of web page design for students' final homework, and the code is simple student level html+css layout. After downloading the work, you can use any HTML editing software (for example, any HTML software such as DW, HBuilder, Notepad, vscade, Sublime, Webstorm, Notepad + +) to edit and modify the web page).

3. Layout of web works: the overall layout of the web page is responsive layout, LOGO, navigation and main content layout. There are many layouts of sub pages. The contents of interests and hobbies use the picture list layout. The score page inserts a table. Contact us to set the left alignment using the picture alignment.

4. Web page work technology: use DIV+CSS to make web pages, background map, music, video, flash, mouse passing and selected navigation color change effect, underline, etc. Submit the form, comment and leave a message, and make a form judgment using JavaScript (the form cannot be empty when submitting).

1, Work display

1. Home page

2. Pet variety

3. Pet products

4. Contact us

2, File directory

3, Code implementation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- Enable speed mode(webkit) -->
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!--  -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="KeyWords" content="home page">
<meta name="description" content="home page">
<title></title>
<link rel="shortcut icon" type="image/x-icon" href="img/upimages/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<meta name='apple-touch-fullscreen' content='yes' />
<meta name="full-screen" content="yes">
<!-- SEO Friendly tips -->
<meta name="applicable-device" content="pc,mobile">

<script src="../../s207js.nicebox.cn/exusers/login_html_v9_diy.php@idweb=1488&langid=0&UPermission=all"></script>
</head>
<body>
	<script type="text/javascript">var Default_isFT = 0;</script>
<script type="text/javascript" src="js/comm/transform.js"></script>
			<div id="comm_layout_header" class="layout  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div class="view_contents">
								<div id="image_style_01_1527063016828" class="view style_01 image  none wow rollIn"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="image" class="view_contents" >
					<div class="imgStyle CompatibleImg">
	
		<a href='index.html@pageid=16279' target="">
	
			<img class="picSet link-type-" src="img/upimages/pkgimg/22.png" title="" alt="describe" id="imageModeShow"/>
	
		</a>
	
</div>


<!-- Newly added js  -->

				</div>
			</div>
					<div id="text_style_01_1527069108468" class="view style_01 text  none lockHeightView"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					<a href="chongwupinzhong.html@pageid=16280" target='' style='color:inherit' class='link-type-1-'>Cute pet display</a>

				</div>
			</div>
					<div id="text_style_01_1527584050519" class="view style_01 text  none lockHeightView"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					PET SHOW

				</div>
			</div>
					<div id="image_style_03_1527070647799" class="view style_03 image  none wow rollIn"  data-wow-duration='1s' data-wow-delay='0.5s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="image" class="view_contents" >
					<div class="imgStyle_3 CompatibleImg">
	
		<a href='chongwupinzhong.html@pageid=16280' target="">
	
			<img class="imgSet" src="img/upimages/pkgimg/20200523185102425.jpg" title="" alt="Samoye" id="imageModeShow"/>
			<div class="tipsText">
				<span>Samoye</span>
			</div>		
	
		</a>
	
</div>





<!-- Newly added js  -->

				</div>
			</div>
					<div id="image_style_03_1527070446077" class="view style_03 image  none wow rollIn"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="image" class="view_contents" >
					<div class="imgStyle_3 CompatibleImg">
	
		<a href='chongwupinzhong.html@pageid=16280' target="">
	
			<img class="imgSet" src="img/upimages/pkgimg/20200523184758742.jpg" title="" alt="Golden Retriever" id="imageModeShow"/>
			<div class="tipsText">
				<span>Golden Retriever</span>
			</div>		
	
		</a>
	
</div>





<!-- Newly added js  -->

				</div>
			</div>
						</div>
			</div>
						</div>
			</div>
						</div>
			</div>
					<div id="layout_1527127382547" class="layout  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div class="view_contents">
									</div>
			</div>
					<div id="layout_1527069212584" class="layout  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div class="view_contents">
								<div id="text_style_01_1527127363826" class="view style_01 text  none wow fadeIn lockHeightView"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					<a href="chongwuyongpin.html@pageid=16281" target='' style='color:inherit' class='link-type-1-'>Product Center</a>

				</div>
			</div>
					<div id="text_style_01_1527127453838" class="view style_01 text  none wow fadeIn lockHeightView"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					PRODUCT CENTER

				</div>
			</div>
					<div id="image_style_11_1527128652268" class="view style_11 image  none wow fadeIn lockHeightView"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="image" class="view_contents" >
					<div class="imgStyle_11">
	<input type='hidden' id='current_page_1527128652268' value="8"/>
	<input type='hidden' id='show_per_page_1527128652268' value="8"/>
	<ul id="content_1527128652268">
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/92_72g1.png" alt="Leather traction suit" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/92_72g1.png');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/92_72g1.png" alt="Leather traction suit"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Leather traction suit</p>
			
		</li>
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/90_fsq6.png" alt="Blue metal diamond pet collar" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/90_fsq6.png');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/90_fsq6.png" alt="Blue metal diamond pet collar"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Blue metal diamond pet collar</p>
			
		</li>
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/86_mcj8.png" alt="Metal diamond pet collar" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/86_mcj8.png');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/86_mcj8.png" alt="Metal diamond pet collar"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Metal diamond pet collar</p>
			
		</li>
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/cahnpin11.jpg" alt="Pet products pet hair removal comb" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/cahnpin11.jpg');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/cahnpin11.jpg" alt="Pet products pet hair removal comb"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Pet products pet hair removal comb</p>
			
		</li>
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/chanpin33.jpg" alt="Medium and large dog products dog food Basin" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/chanpin33.jpg');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/chanpin33.jpg" alt="Medium and large dog products dog food Basin"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Medium and large dog products dog food Basin</p>
			
		</li>
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/chapin44.jpg" alt="Puppy molar bite resistant cotton knot toy ball" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/chapin44.jpg');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/chapin44.jpg" alt="Puppy molar bite resistant cotton knot toy ball"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Puppy molar bite resistant cotton knot toy ball</p>
			
		</li>
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/cahnpin22.jpg" alt="Dog cat bell collar pet dog collar" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/cahnpin22.jpg');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/cahnpin22.jpg" alt="Dog cat bell collar pet dog collar"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Dog cat bell collar pet dog collar</p>
			
		</li>
		
		<li class="imgItems">
			<a href="javascript:;">
			<img class="noimgLoadLate" src="img/upimages/pkgimg/91cahnpin55.jpg" alt="Polyester reflective traction chest strap" style="display:none;">
			<div style="background:url('img/upimages/pkgimg/91cahnpin55.jpg');" class="theimgdiv"></div>
			<!-- <img src="img/upimages/pkgimg/91cahnpin55.jpg" alt="Polyester reflective traction chest strap"> --></a>
			<div class="ratio" style="margin-top:100%;"></div>
			
			<p class="theimgtext titSet">Polyester reflective traction chest strap</p>
			
		</li>
		
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	
</div>

<script type="text/javascript">
	if($(".theimgtext")){
		$(".theimgdiv").css("height","calc(100% - 30px)");
	}else{
		$(".theimgdiv").css("height","100%");
	}
	
</script>






				</div>
			</div>
						</div>
			</div>
					<div id="layout_1527127363271" class="layout  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div class="view_contents">
									</div>
			</div>
					<div id="layout_1527127453295" class="layout  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div class="view_contents">
								<div id="text_style_01_1527129769869" class="view style_01 text  none wow pulse lockHeightView"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					Animals are human friends. Pet love lies in love

				</div>
			</div>
						</div>
			</div>
					<div id="layout_1527130103092" class="layout  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div class="view_contents">
									</div>
			</div>
					<div id="layout_1527148614130" class="layout  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div class="view_contents">
								<div id="div_a_includeBlock_1527148617835" class="view a_includeBlock div  none includeView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="div" class="view_contents" >
								<div id="newsList_style_07_1527131283647" class="view style_07 newsList  none wow fadeIn"  data-wow-duration='1s' data-wow-delay='0.25s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="newsList" class="view_contents" >
					<div class="boxNewsListStyle_7">
    <ul>
    	
            <li class="modSet" style="display:block">
                <div class="newPic imgSet">
                    <a href="xinwenxiangqing.html@newsid=19755" target="_self"><img class="News_img" src="img/upimages/wximg/199058_wx.jpg" ></a>
                    <div class="zTm" style="margin-top:100%"></div>
                </div>
                <div class="newCont twoBgSet">
                
                    <div class="newTitle">                   
                        <a class="titleSet" href="xinwenxiangqing.html@newsid=19755" target="_self" >Why are puppies prone to canine distemper and fine fever</a>
                    </div>
                
                   
                    <div class="newDetail detailSet pc">According to the Vancouver Sun on June 16, Japan has the lowest birth rate in the world, but its life expectancy is relatively low...</div>
                    <div class="newDetail detailSet pad">According to the Vancouver Sun on June 16, Japan has the lowest birth rate in the world, but its life expectancy is relatively low...</div>
                    <div class="newDetail detailSet mobile">According to the Vancouver Sun on June 16, Japan has the lowest birth rate in the world, but its life expectancy is relatively low...</div>
                
                </div>
            </li>
    	
				</div>
			</div>
					<div id="image_logo_1527132054498" class="view logo image  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="image" class="view_contents" >
					<div class="logoStyle modSet">
	

<a href='index.html' target="_self"><img class="imgSet" src="img/logo.png@1528104262" title="" alt="" style="width:100%; height:auto"/></a>


</div>				</div>
			</div>
					<div id="image_style_01_1527132054502" class="view style_01 image  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="image" class="view_contents" >
					<div class="imgStyle CompatibleImg">
	
		<a href='javascript:;' target="">
	
			<img class="picSet link-type-" src="img/footer/z_09/8b8d0c78bde65e37200ccc6b66c4c9de.png" title="" alt="describe" id="imageModeShow"/>
	
		</a>
	
</div>






<!-- Newly added js  -->

				</div>
			</div>
					<div id="text_style_02_1527132054508" class="view style_02 text  none lockHeightView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					Telephone: xxx

				</div>
			</div>
					<div id="text_style_02_1527132054510" class="view style_02 text  none lockHeightView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					Animals are human friends. Here, everyone who loves pets can not only find what they want, but also get more than they want.

				</div>
			</div>
					<div id="dh_style_03_1527132054520" class="view style_03 dh  none lockHeightView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="dh" class="view_contents" >
					
<div class="menuStyle_3">
	<div class="ddsmoothmenu-v">
	  <ul class="menuUl01 columnSet">
	  
	   
	    
		<li id="hot" class="menuLi01 mainMenuSet">
		
	  
	    
		<a href="index.html">home page</a>
	   
			
		</li>
	  
	   
	    
		<li class="menuLi01 mainMenuSet">
		
	  
	    
		<a href="chongwupinzhong.html">Pet variety</a>
	   
			
		</li>
	  
	   
	    
		<li class="menuLi01 mainMenuSet">
		
	  
	    
		<a href="chongwuyongpin.html">Pet Supplies & Pet</a>
	   
			
		</li>
	  
	   
	    
		<li class="menuLi01 mainMenuSet">
		
	  
	    
		<a href="chongwuzixun.html">Pet information</a>
	   
			
		</li>
	  
	   
	    
		<li class="menuLi01 mainMenuSet">
		
	  
	    
		<a href="lianxiwomen.html">contact us</a>
	   
			
		</li>
	  
	  </ul>
	</div>

	<div class="mobi_top" onclick="setDhListen('style_03',this,'mobi_top')">
		<i class="icoFont">=</i>
	</div>
	<div class="mobi_main">
		<div class="mobi_title"><i class="m_icoFont" onclick="setDhListen('style_03',this,'m_icoFont')">×</i></div>
		<div class="header_nav">
			<div class="header_scroll">
			<ul class="mobi_menuUl01">
			 
				<li class="mobi_menuLi01">
			 
				<div class="mobi_border"><a href="index.html">home page</a>
				
			
					
				</li>
			
				<li class="mobi_menuLi01">
			 
				<div class="mobi_border"><a href="chongwupinzhong.html">Pet variety</a>
				
			
					
				</li>
			
				<li class="mobi_menuLi01">
			 
				<div class="mobi_border"><a href="chongwuyongpin.html">Pet Supplies & Pet</a>
				
			
					
				</li>
			
				<li class="mobi_menuLi01">
			 
				<div class="mobi_border"><a href="chongwuzixun.html">Pet information</a>
				
			
					
				</li>
			
				<li class="mobi_menuLi01">
			 
				<div class="mobi_border"><a href="lianxiwomen.html">contact us</a>
				
			
					
				</li>
			
			</ul>
			</div>
		</div>                              
	</div>
</div>
<!-- Menu area End-->

				</div>
			</div>
					<div id="text_style_01_1527132250701" class="view style_01 text  none lockHeightView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					About us

				</div>
			</div>
					<div id="text_style_01_1527132353164" class="view style_01 text  none lockHeightView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					menu

				</div>
			</div>
					<div id="text_style_01_1527132372321" class="view style_01 text  none lockHeightView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					QR code&nbsp;&nbsp;

				</div>
			</div>
					<div id="image_style_01_1527156594672" class="view style_01 image  none"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="image" class="view_contents" >
					<div class="imgStyle CompatibleImg">
	
		<a href='javascript:;' target="">
	
			<img class="picSet link-type-" src="img/upimages/pkgimg/3333.png" title="" alt="describe" id="imageModeShow"/>
	
		</a>
	
</div>






<!-- Newly added js  -->

				</div>
			</div>
					<div id="text_style_02_1527156664466" class="view style_02 text  none lockHeightView"  data-wow-duration='0s' data-wow-delay='0s' data-wow-offset='0' data-wow-iteration='1'>
				<div names="text" class="view_contents" >
					Address: xxx

				</div>
			</div>
						</div>
			</div>
						</div>
			</div>
		<script>
	$(function(){
		sendBatch(batchArr);
	});
</script>
</html>


4, web front end (learning materials)

A complete set of web front-end zero foundation - Introduction to advanced (Video + source code + development software + learning materials + interview questions) (Tutorial)
Suitable for entry-level to advanced children's shoes ~ send 1000 sets of HTML+CSS+JavaScript template websites

5, Source code acquisition

❉ 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, Tanabata confession web page production, 3D cool effect, picture display, text effect, whole station template, college student graduation HTML template, web final assignment template, etc! "Before and after developers, discuss front-end, JAVA and Node knowledge together and learn from each other"!

❉ 3. You can learn from each other about the above contents and technical issues. You can use the web front-end diary on V Xinggong Z > > > 👇🏻👇🏻👇🏻 Get more source code 👇🏻👇🏻👇🏻 !

6, More source code

The source code of more than 500 HTML5 final assessment assignments includes individuals, food, companies, schools, tourism, e-commerce, pets, electrical appliances, tea, home, hotels, dance, animation, stars, clothing, sports, cosmetics, logistics, environmental protection, books, wedding dress, military, games, festivals, smoking cessation, movies, photography, culture, hometown, flowers Gifts, cars and others can meet the web design needs of College Students' Web homework. You can download what you like!

Posted on Tue, 28 Sep 2021 00:23:38 -0400 by Marqis