HTML5 final assignment: Fruit mall website design - vegetable and fruit Mall (10 pages) HTML+CSS+JavaScript learning html web page production final assignment_ Web design final assignment

HTML5 final assignment: Fruit mall website design - vegetable and fruit Mall (10 pages) HTML+CSS+JavaScript learning html web page production final assignment_ Web design final assignment

Common web design topics include 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 Car, other web design topics, A + level homework, can meet the web design needs of College Students' Web homework, and those who like can be downloaded!

🧡Author home page - more source code

🧡HTML final assignment column

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.

2. Web page work editing: after downloading the work, you can use any HTML editing software (such as DW, HBuilder, Notepad, vscade, Sublime, Webstorm, Notepad + +, etc.) to edit and modify the web page.

3. Web work technology: Div+CSS, mouse over effect, Table, navigation bar effect, banner, form, secondary and tertiary pages, video, audio elements, Flash, logo (source file) is designed, and the knowledge points required for basic final homework are fully covered.

1, Work display








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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="common/css/common.css" rel="stylesheet" type="text/css" />
<link href="common/css/style.css" rel="stylesheet" type="text/css" />
<link href="common/css/page.css" rel="stylesheet" type="text/css" />
<script src="common/js/jquery1.42.min.js" type="text/javascript"></script>
<script src="common/js/common_js.js" type="text/javascript"></script>
<script src="common/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<title>Product display</title>
</head>

<body>
<!--Top style-->
<div id="top">
  <div class="top">
    <div class="Collection"><em></em><a href="#"> collect our < / a > < / div >
	<div class="hd_top_manu clearfix">
	  <ul class="clearfix">
	   <li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover">Welcome to our shop!<a href="#" class="red">[Please login]</a> new user<a href="#"Class =" red "> [free registration]</a></li>
	   <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#"> my order</a></li>
	   <li class="hd_menu_tit hd_Shopping_Cart" data-addclass="hd_menu_hover">
	     <a href="#"Class =" hd_menu "> shopping cart (< b > 0 < / b >)</a>
		 <div class="hd_Shopping_list">
		    <i></i>
		   <ul>	   
		   <li>
		    <div class="img"><img src="common/images/tianma.png" /></div>
		    <div class="content"><p><a href="#"> Product Name < / a > < / P > < p > Color Classification: purple flower 8255 size: XL < / P > < / div >
			<div class="Operations">
			<p class="Price">¥55.00</p>
			<p><a href="#"> delete < / a > < / P > < / div >
		   </li>
		   </ul>
		    <div class="Shopping_style"><a href="#"Class =" shopping "> view my shopping cart < / a > < / div >
		   </div>
	   </li>
	   <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#"> contact us</a></li>
	   <li class="hd_menu_tit list_name" data-addclass="hd_menu_hover"><a href="#" class="hd_ Menu "> Customer Service</a>
	    <div class="hd_menu_list">
		   <ul>
		    <li><a href="#"> frequently asked questions</a></li>
			<li><a href="#"> online return and exchange</a></li>
		    <li><a href="#"> online complaints</a></li>
			<li><a href="#"> distribution scope</a></li>
		   </ul>
		</div>	   
	   </li>
	  </ul>
	</div>
  </div>
</div>
<div id="header" class="header">
  <div class="logo"><a href="#"><img src="common/images/logo.png" /></a></div>
  <div class="Search">
    <p><input name="" type="text"  class="text"/><input name="" type="submit" value="search"  class="Search_btn"/></p>
	<p class="Words"><a href="#">Apple</a><a href="#">Banana</a><a href="#">pineapple</a><a href="#">Tomatoes</a><a href="#">orange</a><a href="#"> Apple</a></p>
</div>
  <div class="phone">
   <img src="common/images/phone.png" />
  </div>
</div>
<!--Navigation bar style-->
<div id="Menu">
  <div class="Menu_style">
  <div id="allSortOuterbox" class="display">
    <div class="Category"><a href="#"> < EM > < / EM > all product categories < / a > < / div >
    <div class="hd_allsort_out_box_new">
	 <!--Left column start-->
	 <ul class="Menu_list">	
	    <li class="name"><a href="#"> fresh fruits</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <div class="title_name">Tropical fruits</div>
			  <li><a href="#">pineapple</a><a href="#">Banana</a><a href="#">kiwifruit</a><a href="#"> name</a></li>
			</ul>
			 <ul>
			  <div class="title_name">Temperate fruit</div>
			  <li><a href="#">name</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		 
		</li>
		<li class="name"><a href="#"> fine vegetables</a>
		
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">23</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		
		</li>
		<li class="name"><a href="#"> Special dried fruit</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		
		</li>
		<li class="name"><a href="#"> grain, oil and food</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#"> seasoning</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#"> fresh meat</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#"> aquatic products</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#"> daily necessities</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		</li>
		<li class="name"><a href="#"> publicity Service</a>
		<div class="menv_Detail">
		 <div class="cat_pannel clearfix">
		    <ul>
			  <li><a href="#">33</a><a href="#">name</a><a href="#">name</a><a href="#"> name</a></li>
			</ul>
		  </div>
		</div>
		</li>
	</ul>	
	</div>		
	</div>
	<script>$("#allSortOuterbox").slide({ titCell:".Menu_list li",mainCell:".menv_Detail",	});</script>
	<!--menu bar-->
	<div class="Navigation" id="Navigation">
		 <ul class="Navigation_name">
		   <li><a href="#"> Home Page</a></li>
		    <li><a href="#"> vegetables</a></li>
			 <li><a href="#"> fruit</a></li>
			  <li><a href="#"> special offer</a></li>
			   <li><a href="#"> grain and oil</a></li>
			    <li><a href="#"> package gift box</a></li>
				 <li><a href="#"> limited time group purchase</a></li>
		 </ul>	
		</div>
			<script>$("#Navigation").slide({titCell:".Navigation_name li"});</script>
			<!--Shopping Cart-->
			<div class="Shopping_car">
			    <em></em> Shopping Cart(<b>0</b>)
			</div>
  </div>
</div>
<!--Product list-->
<div id="page">
   <!--Hot goods-->
 <div class="Hot_products">
   <div class="hd">Hot products</div>
   <ul>
	<li>
	 <div class="img"><a href="#"><img src="common/images/cp-6.jpg" /></a></div>
	 <div class="product_js">
	 <p class="title_name"><a href="#"> local fresh peach name</a></p>
	 <p >Special Offer:<b>¥6.30</b></p>
	 <p><a href="#" class="gm_ BTN "> buy now</a></p>
	 </div>
	</li>
	<li>
	 <div class="img"><a href="#"><img src="common/images/cp-6.jpg" /></a></div>
	 <div class="product_js">
	 <p class="title_name"><a href="#"> local fresh peach name</a></p>
	 <p >Special Offer:<b>¥6.30</b></p>
	 <p><a href="#" class="gm_ BTN "> buy now</a></p>
	 </div>
	</li>
	<li>
	 <div class="img"><a href="#"><img src="common/images/cp-6.jpg" /></a></div>
	 <div class="product_js">
	 <p class="title_name"><a href="#"> local fresh peach name</a></p>
	 <p >Special Offer:<b>¥6.30</b></p>
	 <p><a href="#" class="gm_ BTN "> buy now</a></p>
	 </div>
	</li>
	<li>
	 <div class="img"><a href="#"><img src="common/images/cp-6.jpg" /></a></div>
	 <div class="product_js">
	 <p class="title_name"><a href="#"> local fresh peach name</a></p>
	 <p >Special Offer:<b>¥6.30</b></p>
	 <p><a href="#" class="gm_ BTN "> buy now</a></p>
	 </div>
	</li>
   </ul>
 </div>
<!--position-->
 <div class="Position">Current location:<a href="#">home page</a> > <a  href="#"> Product List < / a > < / div >
 <!--Content display area style-->
<div class="Show_style">
 <div class="Operation">
   <span><a href="#" class="on">default</a><a href="#">sales volume<em></em></a><a href="#">Price<em></em></a><a href="#"> shelf time</a></span>
   <span class="img_lists"><em></em><a href="#"> big picture</a></span>
  </div>
   <dl class="fore1">
			<dt><strong>Shopping Directory</strong></dt>
			<dd>
				<div><a href="#" target="_ Blank "rel =" nofollow "> shopping process < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> member introduction < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> group purchase / air ticket < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> frequently asked questions < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> big appliances < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> contact customer service < / a > < / div >
			</dd>
		</dl>
		 <dl class="fore1">
			<dt><strong>Shopping Directory</strong></dt>
			<dd>
				<div><a href="#" target="_ Blank "rel =" nofollow "> shopping process < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> member introduction < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> group purchase / air ticket < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> frequently asked questions < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> big appliances < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> contact customer service < / a > < / div >
			</dd>
		</dl>
		 <dl class="fore1">
			<dt><strong>Shopping Directory</strong></dt>
			<dd>
				<div><a href="#" target="_ Blank "rel =" nofollow "> shopping process < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> member introduction < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> group purchase / air ticket < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> frequently asked questions < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> big appliances < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> contact customer service < / a > < / div >
			</dd>
		</dl>
		 <dl class="fore1">
			<dt><strong>Shopping Directory</strong></dt>
			<dd>
				<div><a href="#" target="_ Blank "rel =" nofollow "> shopping process < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> member introduction < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> group purchase / air ticket < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> frequently asked questions < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> big appliances < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> contact customer service < / a > < / div >
			</dd>
		</dl>
		 <dl class="fore1">
			<dt><strong>Shopping Directory</strong></dt>
			<dd>
				<div><a href="#" target="_ Blank "rel =" nofollow "> shopping process < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> member introduction < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> group purchase / air ticket < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> frequently asked questions < / a > < / div >
				<div><a href="#" target="_ Blank "rel =" nofollow "> big appliances < / a > < / div >
				<div><a href="#"Target =" _blank "rel =" nofollow "> contact customer service < / a > < / div >
			</dd>
		</dl>
   </div>
 </div>
</div>
</div>
<div id="bottom">
 <div class="footers">
  <div class="logo"></div>
  <div class="footer_link">
    <div class="links">
	<a href="#">About us</a> | <a href="#">contact us</a> | <a href="#">Merchant settlement</a> | <a href="#">Marketing Center</a> | <a href="#">Links</a> | <a href="#">Sales alliance</a> | <a href="#">Legal statement</a> | <a href="#"> user experience improvement plan</a>
	</div>
	<div>Copyright© 2002-2015 ,Fresh basket all rights reserved Ministry of information industry filing license No ICP Cb10207551 B1-20130131 Chuan B2-20130376 </div>
	<div><a href="#"><img src="common/images/12.gif" /></a><a href="#"><img src="common/images/108_40_zZOKnl.gif" /></a><a href="#"><img src="common/images/112_40_WvArIl.png" /></a></div>
  </div>
  </div>
</div>
</body>
</html>


4, 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, More source code

HTML5 final assessment homework source code * 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 and gifts Products, cars and others can meet the web design needs of College Students' Web homework. You can download what you like!

Tags: Javascript Front-end html5 html css

Posted on Mon, 22 Nov 2021 23:57:08 -0500 by baw