HTML5期末大作业
文章目录
HTML5期末大作业一、作品展示二、文件目录三、代码实现一、作品展示
二、文件目录
三、代码实现
<!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>
