HTML5期末大作业：生活类购物商城网站设计——生活类购物商城模板(2页)

HTML5期末大作业：生活类购物商城网站设计——生活类购物商城模板(2页) 大学生购物网页制作教程表格布局网页模板学生HTML商城网页设计作业成品简单网页制作代码学生商店网页作品

常见网页设计作业题材有个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、明星、服装、体育、化妆品、物流、环保、书籍、婚纱、军事、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他等网页设计题目,A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

获取更多源码

PC电脑端关注我们

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

1.网页作品简介：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：生活类购物商城网站设计——生活类购物商城模板(2页) 大学生购物网页制作教程表格布局网页模板学生HTML商城网页设计作业成品简单网页制作代码学生商店网页作品获取更多源码作品介绍一、作品展示二、文件目录三、代码实现四、获取更多源码五、学习资料六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>列表页</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>全部搜索分类</h2><dl class="category"><dt><i class="tree"></i>男装</dt><dd><ul class="sub"><li><a href="">男士T恤</a></li><li><a href="">男士T恤</a></li><li><a href="">男士T恤</a></li><li><a href="">男士T恤</a></li></ul></dd></dl></div><div class="sidebar"><h2>店连店热卖</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></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></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>今日推荐</h2><div class="rec_goods clear"><ul><li style="padding-left:0;"><dl><dt class="goodname"><a href="">女童公主裙纱裙儿童礼服连衣裙蛋糕裙新款童装花童蓬蓬裙子</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="">女童公主裙纱裙儿童礼服连衣裙蛋糕裙新款童装花童蓬蓬裙子</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="">女童公主裙纱裙儿童礼服连衣裙蛋糕裙新款童装花童蓬蓬裙子</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="">女童公主裙纱裙儿童礼服连衣裙蛋糕裙新款童装花童蓬蓬裙子</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>品牌：</dt><dd class="list"><ul><li ><a href="">唐狮(Tilion)</a> </li><li ><a href="">欣缘木子</a> </li><li ><a href="">AFS JEEP战地吉普</a> </li><li ><a href="">彪马/PUMA</a> </li><li ><a href="">唐狮(Tilion)</a> </li><li ><a href="">欣缘木子</a> </li><li ><a href="">AFS JEEP战地吉普</a> </li><li ><a href="">彪马/PUMA</a> </li><li ><a href="">AFS JEEP战地吉普</a> </li><li ><a href="">彪马/PUMA</a> </li></ul></dd></dl><dl ><dt>尺码：</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>版型：</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>价格：</dt><dd class="list"><ul><li ><a href="">50元以下</a> </li><li ><a href="">50-100元</a> </li><li ><a href="">100-200元</a> </li></ul></dd></dl><dl ><dt>其他条件：</dt><dd class="list"><ul><li ><a href="">修身</a> </li><li ><a href="">紧身</a> </li><li ><a href="">宽松</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</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="">韩国官网修身显瘦小脚铅笔裤官网修身显瘦小脚官网修身显瘦小脚</a></p><p class="g-price"><span class="price">￥<em>199</em></span ><span class="del-price">￥289</span><span class="bar">已售：483件</span></p><div class="seller-info"><p><span>商品评价数：</span><span><a href="">0条</a></span></p><p><span>卖家好评率：</span><span>99%</span></p><p><span>累积信用度：</span><span class="heart"></span></p><p><span>描述相符度：</span><span>6分</span></p></div></div></li></ul></div><div class="pagebox"><div class="pagination"><ul class="clear"><li><a href=""><span>上一页</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>下一页</span></a></li><li><span class="hidepage">向第</span><input type="text" class="pagenum"><span class="hidepage">页</span><a href="#" class="pagebtn" >跳转</a></li></ul></div></div><div class="research"><p><span>重新搜索</span><input type="text" class="retext"><input type="button" class="reseabtn" value="搜索"></p></div></div></div><script type="text/javascript">$(function(){//鼠标经过商品列表出现商家信息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");//树形结构折叠展开$(".category dt").toggle(function(){$(this).addClass("on");$(".sub").css('display','none');},function(){$(this).removeClass("on");$(".sub").css('display','block');});});</script></body></html>