HTML5 final assignment: life shopping mall website design - life shopping mall template (2 pages) college student shopping web page making tutorial table layout web page template student HTML mall web page design assignment finished product simple web page making code student store web page work
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!
Get more source code
PC pays attention to us
🧡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>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>List page</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="css/list.css" rel="stylesheet" >
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="content clear">
<div class="left">
<div class="sidebar">
<h2>All search categories</h2>
<dl class="category">
<dt><i class="tree"></i>men's wear</dt>
<dd>
<ul class="sub">
<li><a href="">man T Shirt</a></li>
<li><a href="">man T Shirt</a></li>
<li><a href="">man T Shirt</a></li>
<li><a href="">man T Shirt</a></li>
</ul>
</dd>
</dl>
</div>
<div class="sidebar">
<h2>Store to store selling</h2>
<ul class="hotbox">
<li class="hotlist">
<div class="hotpic"><a href="#"><img width="150" src="images/default_goods_image.gif_small.gif"></a></div>
<div class="hotinfo">
<div class="hot-name"><a href="#"> a dust of Buddha beads, old Indian material, high oil density lobular red sandalwood bracelet, Buddha beads for men and women < / a > < / div >
<div class="hot-price"><a href="#"><i>Â¥</i><span>129.90</span></a></div>
</div>
</li>
<li class="hotlist">
<div class="hotpic"><a href="#"><img width="150" src="images/default_goods_image.gif_small.gif"></a></div>
<div class="hotinfo">
<div class="hot-name"><a href="#"> a dust of Buddha beads, old Indian material, high oil density lobular red sandalwood bracelet, Buddha beads for men and women < / a > < / div >
<div class="hot-price"><a href="#"><i>Â¥</i><span>129.90</span></a></div>
</div>
</li>
</ul>
</div>
</div>
<div class="right">
<div class="sidebar rec">
<h2>Recommended today</h2>
<div class="rec_goods clear">
<ul>
<li style="padding-left:0;">
<dl>
<dt class="goodname">
<a href="">Girls' princess skirt yarn skirt children's dress dress cake skirt 2015 new children's dress flower girl fluffy skirt</a>
</dt>
<dd class="goodpic"><a href="#"><img src="images/default_goods_image.gif_small.gif"></a></dd>
<dd class="goodprice"><em>59</em></dd>
</dl>
</li>
<li>
<dl>
<dt class="goodname">
<a href="">Girls' princess skirt yarn skirt children's dress dress cake skirt 2015 new children's dress flower girl fluffy skirt</a>
</dt>
<dd class="goodpic"><a href="#"><img src="images/default_goods_image.gif_small.gif"></a></dd>
<dd class="goodprice"><em>59</em></dd>
</dl>
</li>
<li>
<dl>
<dt class="goodname">
<a href="">Girls' princess skirt yarn skirt children's dress dress cake skirt 2015 new children's dress flower girl fluffy skirt</a>
</dt>
<dd class="goodpic"><a href="#"><img src="images/default_goods_image.gif_small.gif"></a></dd>
<dd class="goodprice"><em>59</em></dd>
</dl>
</li>
<li>
<dl>
<dt class="goodname">
<a href="">Girls' princess skirt yarn skirt children's dress dress cake skirt 2015 new children's dress flower girl fluffy skirt</a>
</dt>
<dd class="goodpic"><a href="#"><img src="images/default_goods_image.gif_small.gif"></a></dd>
<dd class="goodprice"><em>59</em></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="filter">
<dl >
<dt>Brand:</dt>
<dd class="list">
<ul>
<li ><a href="">Tang Shi(Tilion)</a> </li>
<li ><a href="">Xinyuan Muzi</a> </li>
<li ><a href="">AFS JEEP Field jeep</a> </li>
<li ><a href="">Puma/PUMA</a> </li>
<li ><a href="">Tang Shi(Tilion)</a> </li>
<li ><a href="">Xinyuan Muzi</a> </li>
<li ><a href="">AFS JEEP Field jeep</a> </li>
<li ><a href="">Puma/PUMA</a> </li>
<li ><a href="">AFS JEEP Field jeep</a> </li>
<li ><a href="">Puma/PUMA</a> </li>
</ul>
</dd>
</dl>
<dl >
<dt>size:</dt>
<dd class="list">
<ul>
<li ><a href="">35</a> </li>
<li ><a href="">36</a> </li>
<li ><a href="">37</a> </li>
<li ><a href="">38</a> </li>
<li ><a href="">39</a> </li>
<li ><a href="">40</a> </li>
<li ><a href="">41</a> </li>
<li ><a href="">42</a> </li>
</ul>
</dd>
</dl>
<dl >
<dt>Version:</dt>
<dd class="list">
<ul>
<li ><a href="">35</a> </li>
<li ><a href="">36</a> </li>
<li ><a href="">37</a> </li>
<li ><a href="">38</a> </li>
<li ><a href="">39</a> </li>
<li ><a href="">40</a> </li>
<li ><a href="">41</a> </li>
<li ><a href="">42</a> </li>
</ul>
</dd>
</dl>
<dl >
<dt>Price:</dt>
<dd class="list">
<ul>
<li ><a href="">50 Below yuan</a> </li>
<li ><a href="">50-100 element</a> </li>
<li ><a href="">100-200 element</a> </li>
</ul>
</dd>
</dl>
<dl >
<dt>Other conditions:</dt>
<dd class="list">
<ul>
<li ><a href="">Self-cultivation</a> </li>
<li ><a href="">Tight fitting</a> </li>
<li ><a href="">easy</a> </li>
</ul>
</dd>
</dl>
</div>
<div class="sorbar">
</div><br><br>
<div class="goods-list">
<ul class="list clear">
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
<li>
<div class="g">
<div class="g-pic"><a href=""><img src="images/good1.jpg"></a></div>
<p class="g-name"><a href="">Korea official website Slim Slim small feet pencil pants official website Slim small feet official website Slim small feet</a></p>
<p class="g-price"><span class="price">ï¿¥<em>199</em></span ><span class="del-price">ï¿¥289</span><span class="bar">Sold: 483 pieces</span></p>
<div class="seller-info">
<p><span>Number of commodity evaluations:</span><span><a href="">0 strip</a></span> </p>
<p><span>Seller's praise rate:</span><span>99%</span> </p>
<p><span>Cumulative credit:</span><span class="heart"></span> </p>
<p><span>Description consistency:</span><span>6 branch</span> </p>
</div>
</div>
</li>
</ul>
</div>
<div class="pagebox">
<div class="pagination">
<ul class="clear">
<li><a href=""><span>previous page</span></a></li>
<li><a href=""><span class="curpage">1</span></a></li>
<li><a href=""><span>2</span></a></li>
<li><a href=""><span>3</span></a></li>
<li><span class="hidepage">...</span></li>
<li><a href=""><span>10</span></a></li>
<li><a href=""><span>next page</span></a></li>
<li>
<span class="hidepage">Xiang di</span><input type="text" class="pagenum"><span class="hidepage">page</span>
<a href="#"Class =" pagebtn "> jump</a>
</li>
</ul>
</div>
</div>
<div class="research">
<p>
<span>Re search</span>
<input type="text" class="retext"><input type="button" class="reseabtn" value="search">
</p>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//The mouse passes through the commodity list and the merchant information appears
function ghover(a,b){
$(a).children().hover(function(){
$(this).find(b).css('display','block');
},function(){
$(this).find(b).css('display','none');
});
}
ghover(".list",".seller-info");
//Tree structure folding and unfolding
$(".category dt").toggle(function(){
$(this).addClass("on");
$(".sub").css('display','none');
},function(){
$(this).removeClass("on");
$(".sub").css('display','block');
});
});
</script>
</body>
</html>
4, Get more source code
PC pays attention to us
5, 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
6, 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!
