HTML5期末大作业：服装购物网站设计——粉色服装购物商城(4页)

文章目录

  • HTML5期末大作业：服装购物网站设计——粉色服装购物商城(4页)
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、学习资料

一、作品展示




二、文件目录

三、代码实现


<!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" />
<title>详细页面</title>
<meta name="keywords" content="[!--pagekey--]" />
<meta name="description" content="[!--pagedes--]" />
<link href="images/all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
<script type="text/javascript" src="js/SuperSlide.js"></script>
</head><body>
<header><div class="nav"><ul><li class="li1"><a>海</a></li><li class="li2"><a>拼</a></li></ul>
</div><div class="head"><div class="top"><div class="wrapper"><div class="logo fl"><a href="index.html"><img src="data:images/logo.png" /></a></div><div class="dl fr"><ul><li>欢迎您,DGL</li><li><a href="">退出</a></li><li><a href="">个人中心</a></li><li><a href="">我的订单</a></li><li><a href="login.html">登录</a></li><li><a href="">注册</a></li></ul><div class="sousuo"><input class="index_srh" name="keyboard" value="请输入您要查找的商品" onBlur="if(this.value=='') this.value='请输入您要查找的商品';" onFocus="if(this.value=='请输入您要查找的商品') this.value='';"><input class="search" type="submit" name="submit" value="搜索"></div></div></div></div><div class="menu"><div class="wrapper"><ul><li class="li1"><a href="piclist.html" class="on">全部分类</a></li><li class="li2"><a href="index.html">首页</a></li><li class="li3"><a href="piclist.html">潮流单品</a></li><li class="li4"><a href="piclist.html">衣服</a></li><li class="li5"><a href="piclist.html">鞋子</a></li><li class="li6"><a href="piclist.html">包包</a></li><li class="li7"><a href="piclist.html">配饰</a></li><li class="li8"><a href="piclist.html">潮流单品</a></li><li class="li9"><a href="piclist.html">衣服</a></li><li class="li10"><a href="piclist.html">鞋子</a></li><li class="li11"><a href="piclist.html">包包</a></li><li class="li12"><a href="piclist.html">配饰</a></li></ul></div></div></div>
</header><div class="xiangqing"><div class="shangjiaming"><div class="wrapper"><div class="fl left">小Y包袋</div><div class="fr right"><span class="fl"><a href="">+关注本店</a></span><span class="fl">409粉丝</span></div></div></div><div class="sj-wrapper"><div class="sj-logo"><img src="data:images/shangjia-logo.jpg" /></div><div class="menu"><a href="">首页</a><a href="">多功能</a><a href="">单肩/手提</a><a href="">大包包</a><a href="">小包</a></div><div class="game163 fl"><ul class="bigImg"><li><a href="" target="_blank"><img src="data:images/pic1.jpg" /></a><h4><a href="" target="_blank">美女玩家猎魔人 Cosplay</a></h4></li><li><a href="" target="_blank"><img src="data:images/pic2.jpg" /></a><h4><a href="#">《第2次机战OG》魔装机神系机体情报</a></h4></li><li><a href="" target="_blank"><img src="data:images/pic3.jpg" /></a><h4><a href="#">Dreamhack冬季赛：Hero夺冠 香槟狂欢</a></h4></li><li><a href="" target="_blank"><img src="data:images/pic4.jpg" /></a><h4><a href="#">妹子战丧尸！Bioware王牌画师插画赏</a></h4></li><li><a href="" target="_blank"><img src="data:images/pic5.jpg" /></a><h4><a href="#">《刺客信条3》简体中文版已送审</a></h4></li><li><a href="" target="_blank"><img src="data:images/list1.jpg" /></a><h4><a href="#">《上古世纪》 中文版截图独家曝光</a></h4></li><li><a href="" target="_blank"><img src="data:images/list2.jpg" /></a><h4><a href="#">本周精选大湿级Cos欣赏 佐助亲吻小樱</a></h4></li><li><a href="" target="_blank"><img src="data:images/list3.jpg" /></a><h4><a href="#">《斗仙》11月29日封测 试玩截图首曝</a></h4></li></ul><div class="smallScroll"><a class="sPrev" href="javascript:void(0)">←</a><div class="smallImg"><ul><li><a><img src="data:images/pic1.jpg" /></a></li><li><a><img src="data:images/pic2.jpg" /></a></li><li><a><img src="data:images/pic3.jpg" /></a></li><li><a><img src="data:images/pic4.jpg" /></a></li><li><a><img src="data:images/pic5.jpg" /></a></li><li><a><img src="data:images/list1.jpg" /></a></li><li><a><img src="data:images/list2.jpg" /></a></li><li><a><img src="data:images/list3.jpg" /></a></li></ul></div><a class="sNext" href="javascript:void(0)">→</a></div><div class="pageState"></div></div><div class="jieshao fr"><div class="title">韩版糖果色迷你链条小包</div><div class="by"><div class="fl"><a href=""><img src="data:images/tx.jpg" /></a></div><div class="fr"><p>辣辣</p><p><span class="b1">&nbsp;</span><span>你是否也在寻找一款简约却绝不简单的包包，多种色彩多搭配，散发一种低调的时尚感。</span><span class="b2">&nbsp;</span></p></div></div><div class="jg clearfix"><ul><li><span class="short">价 格</span><span class="price red">¥49.28</span><span class="btn">限时5.6折</span><span class="btn">免运费</span></li><li><span class="short">原 价</span><span class="yj">￥88.00</span></li><li><span class="short">促 销</span><span class="btn">限时折扣</span><span>本商品参与店铺限时5.6折优惠</span></li><li><span class="short">&nbsp;</span><span class="btn">微信直减</span><span>每日首单使用微信支付立减10元！</span><a href="" class="red">点击查看</a></li><li><span class="short">运 费</span><span>包邮</span></li><li><span class="short">销 量</span><span>共售出3299件</span></li><li><span class="short">喜 欢</span><span>有6789人喜欢该商品</span></li><li><span class="short">评 分</span><span class="star">&nbsp;</span>4.5分（已有<a href="">14人评价</a>，<a href="">2条晒单</a>）</li><li><span class="short">颜 色</span><span class="img"><img src="data:images/1.1.jpg" /></span><span class="img"><img src="data:images/1.2.jpg" /></span><span class="img"><img src="data:images/1.3.jpg" /></span></li><li><span class="short">数 量</span><span class="jian"></span><span><input type="text" class="num" value="1" /></span><span class="jia"></span></li><li><span class="short">客 服</span><span class="border kf">商家客服</span></li></ul></div><div class="btn_box"><div class="fl"><a href="" class="jiaru"><em></em>加入购物车</a><a href="" class="like"><em></em>立刻购买</a></div></div></div><div class="clearfix"></div></div><div class="sj-center sj-wrapper clearfix"><ul><li><a href=""><img src="data:images/pc_bao_new.png" /></a><p class="da"><a href="">全场免运费</a></p><p><a href="">无最低消费限制</a></p></li><li><a href=""><img src="data:images/pc_seven_new.png" /></a><p class="da"><a href="">七天无理由退款</a></p><p><a href="">轻松购物有保障</a></p></li><li><a href=""><img src="data:images/pc_pei_new.png" /></a><p class="da"><a href="">退货补贴运费</a></p><p><a href="">轻松购物有保障</a></p></li><li><a href=""><img src="data:images/pc_fan_new.png" /></a><p class="da"><a href="">先行赔付</a></p><p><a href="">轻松购物有保障</a></p></li></ul></div><div class="renqi sj-wrapper"><div class="title">人气单品</div><ul><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚<td>晶***2（匿名）</td><td align="center" valign="middle">1</td><td align="center" valign="middle">2014-03-20 10:49:17</td><td align="center" valign="middle">酒红色（升级加强版）新品现货</td></tr><tr><td>晶***2（匿名）</td><td align="center" valign="middle">1</td><td align="center" valign="middle">2014-03-20 10:49:17</td><td align="center" valign="middle">酒红色（升级加强版）新品现货</td></tr><tr><td>晶***2（匿名）</td><td align="center" valign="middle">1</td><td align="center" valign="middle">2014-03-20 10:49:17</td><td align="center" valign="middle">酒红色（升级加强版）新品现货</td></tr><tr><td>晶***2（匿名）</td><td align="center" valign="middle">1</td><td align="center" valign="middle">2014-03-20 10:49:17</td><td align="center" valign="middle">酒红色（升级加强版）新品现货</td></tr></table></ul><ul><div class="shouqian"><dl><dd class="clearfix"><div class="fl"><img src="data:images/tx2.jpg" /></div><div class="fl"><p><a href="">购物狂狂狂人</a></p><p>包包控的童鞋来这里,价格超实惠,人也很好! Q:170813916,V信:wx480021,更多优惠尽请期待...</p></div><div class="fr">2013-10-10</div><p class="hf"><a href="">回复</a></p></dd><dd class="clearfix"><div class="fl"><img src="data:images/tx2.jpg" /></div><div class="fl"><p><a href="">购物狂狂狂人</a></p><p>包包控的童鞋来这里,价格超实惠,人也很好! Q:170813916,V信:wx480021,更多优惠尽请期待...</p></div><div class="fr">2013-10-10</div><p class="hf"><a href="">回复</a></p></dd><dd class="clearfix"><div class="fl"><img src="data:images/tx2.jpg" /></div><div class="fl"><p><a href="">购物狂狂狂人</a></p><p>包包控的童鞋来这里,价格超实惠,人也很好! Q:170813916,V信:wx480021,更多优惠尽请期待...</p></div><div class="fr">2013-10-10</div><p class="hf"><a href="">回复</a></p></dd><dd class="clearfix"><div class="fl"><img src="data:images/tx2.jpg" /></div><div class="fl"><p><a href="">购物狂狂狂人</a></p><p>包包控的童鞋来这里,价格超实惠,人也很好! Q:170813916,V信:wx480021,更多优惠尽请期待...</p></div><div class="fr">2013-10-10</div><p class="hf"><a href="">回复</a></p></dd><dd class="clearfix"><div class="fl"><img src="data:images/tx2.jpg" /></div><div class="fl"><p><a href="">购物狂狂狂人</a></p><p>包包控的童鞋来这里,价格超实惠,人也很好! Q:170813916,V信:wx480021,更多优惠尽请期待...</p></div><div class="fr">2013-10-10</div><p class="hf"><a href="">回复</a></p></dd><dd class="clearfix"><div class="fl"><img src="data:images/tx2.jpg" /></div><div class="fl"><p><a href="">购物狂狂狂人</a></p><p>包包控的童鞋来这里,价格超实惠,人也很好! Q:170813916,V信:wx480021,更多优惠尽请期待...</p></div><div class="fr">2013-10-10</div><p class="hf"><a href="">回复</a></p></dd></dl></div></ul></div></div><div class="remai sj-wrapper"><div class="title">本店热卖</div><ul><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li><li><a href=""><img src="data:images/list1.jpg" /></a><p class="p1"><a href="">2014人气必败王 万搭款时尚潮流小包 可以单肩斜挎</a></p><p class="p2"><em class="em1">¥28.00</em></p><p class="p3">4637人已购买</p></li></ul></div><div class="sj-center sj-wrapper clearfix"><ul><li><a href=""><img src="data:images/pc_bao_new.png" /></a><p class="da"><a href="">全场免运费</a></p><p><a href="">无最低消费限制</a></p></li><li><a href=""><img src="data:images/pc_seven_new.png" /></a><p class="da"><a href="">七天无理由退款</a></p><p><a href="">轻松购物有保障</a></p></li><li><a href=""><img src="data:images/pc_pei_new.png" /></a><p class="da"><a href="">退货补贴运费</a></p><p><a href="">轻松购物有保障</a></p></li><li><a href=""><img src="data:images/pc_fan_new.png" /></a><p class="da"><a href="">先行赔付</a></p><p><a href="">轻松购物有保障</a></p></li></ul>
</div></div><footer><div class="foot"><div class="wrapper"><div class="fl left"><p><a href="" class="foot-logo"></a></p><div class="share"><a href="" class="sina"></a><a href="" class="qq"></a><a href="" class="weixin"></a><a href="" class="wap"></a></div><p>增值电信业务经营许可证：浙B2-20110349</p><p>©2013 Mogujie.com,All Rights Reserved.</p></div><div class="center fl"><dl class="xiaofei"><dt>获取更新</dt><dd><a href="">邮件订阅</a></dd><dd><a href="">iPhone/Android</a></dd><dd><a href="">美团QQ空间</a></dd><dd><a href="">美团新浪微博</a></dd><dd><a href="">sitemap</a></dd><dd><a href="">RSS订阅</a></dd></dl><dl class="gongsi"><dt>公司</dt><dd><a href="">关于美团</a></dd><dd><a href="">美团承诺</a></dd><dd><a href="">媒体报道</a></dd><dd><a href="">加入我们</a></dd><dd><a href="">法律声明</a></dd><dd><a href="">用户协议</a></dd></dl><dl class="shangjia"><dt>商务合作</dt><dd><a href="">提供团购信息</a></dd><dd><a href="">美团商家营销平台</a></dd><dd><a href="">市场合作</a></dd><dd><a href="">美团联盟</a></dd><dd><a href="">廉正邮箱</a></dd><dd><a href="">moc.nautiem@gnehznail</a></dd></dl><dl class="bangzhu"><dt>用户帮助</dt><dd><a href="">申请退款</a></dd><dd><a href="">查看美团券密码</a></dd><dd><a href="">常见问题</a></dd><dd><a href="">开放API</a></dd><dd><a href="">美团云</a></dd><dd><a href="">反诈骗公告</a></dd></dl></div><div class="youce fr"><div class="ico"></div><p>退款、退换货、查看美团券<br /><em>参考教程，轻松搞定 »</em></p><p class="tel">客服电话：400-660-5335<br />服务时间：每天 9:00 - 22:00</p></div></div><div class="clearfix"></div></div>
</footer>
<script src="js/all.js" type="text/javascript"></script>
</body>
</html>

四、学习资料

~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码

HTML+CSS+JS大作业：服装购物网站设计——粉色服装购物商城(4页) 服装购物商城网页设计作品 大学生购物专题网页设计作业模板 商店静态HTML网页模板下载相关推荐

  1. HTML5期末大作业：服装购物网站设计——粉色服装购物商城(4页) 服装购物商城网页设计作品 大学生购物专题网页设计作业模板 商店静态HTML网页模板下载

    HTML5期末大作业:服装购物网站设计--粉色服装购物商城(4页) 服装购物商城网页设计作品 大学生购物专题网页设计作业模板 商店静态HTML网页模板下载 常见网页设计作业题材有 个人. 美食. 公司 ...

  2. DIV+CSS进行布局 HTML+CSS+JS大作业——汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载

    HTML+CSS+JS大作业--汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

  3. HTML+CSS+JS大作业——汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载

    HTML+CSS+JS大作业--汽车销售网站模板(7页) html网页设计期末大作业_网页设计平时作业模板下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

  4. 学生DW网页设计作业成品 HTML+CSS+JS大作业——汽车设备营销企业模板(13页) 静态HTML网页设计模板

    HTML+CSS+JS大作业--汽车设备营销企业模板(13页) 静态HTML网页设计模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...

  5. HTML+CSS+JS大作业——汽车设备营销企业模板(13页) 静态HTML网页设计模板

    HTML+CSS+JS大作业--汽车设备营销企业模板(13页) 静态HTML网页设计模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...

  6. 网页作业HTML+CSS+JS大作业——汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品

    HTML+CSS+JS大作业--汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

  7. HTML+CSS+JS大作业——汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品

    HTML+CSS+JS大作业--汽车租赁(47页) 加特效 web期末作业设计网页_汽车大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. ...

  8. 网页设计作业成品 HTML+CSS+JS大作业——汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作

    HTML+CSS+JS大作业--汽车保险销售综合商城(44页) HTML5网页设计成品_学生DW静态网页设计_web课程设计网页制作 文章目录 HTML+CSS+JS大作业--汽车保险销售综合商城(4 ...

  9. HTML + CSS + JS做一个绘画分享网站[开源项目]

    声明:1.此项目仅仅代码开源,DrawPark是此博客的产权,严禁盗用 2.此项目暂时是静态网站 先看一下效果图吧!预览网址:https://drawpark.rth.app/ HTML代码 ​< ...

最新文章

  1. vivox3android系统,vivo X3手机系统是什么 vivo X3手机能升级安卓4.3
  2. java 静态内部类 内部类_Java中内部类和静态内部类的区别
  3. 冒泡排序法C语言代码
  4. sqlite developer注册码（转）
  5. android 天气类应用,一周天气预报！7款另类Android天气应用
  6. NLP中文句子类型判别和分类实现
  7. eMarketer：女性网民更偏爱网络社区
  8. html字体怎么变大变粗,ppt如何加粗字体更粗 幻灯片的艺术字怎么把字体变粗？...
  9. Excel最大值和最小值的提取问题
  10. 70后.net老猿，尚能饭否？
  11. excel表格末尾添加一行_七夕表白，用Excel试试！抖音爆红，一晚点赞破百万
  12. Nexus私服使Maven更加强大
  13. 成熟好用的电池供电切换电路
  14. 国家自然科学基金 结题项目 查询网站
  15. MySQL关于分库分表及其平滑扩容方案
  16. Matlab Simulink 代数环相关问题
  17. ZigBee室内定位设备的天线与射频接口电路设计
  18. 牛客网刷题之SQL篇：非技术快速入门39T
  19. 树形结构根据某一节点向上生成树（无递归）
  20. CVX用户指南之简介

热门文章

  1. 命名自喜剧团体，宅男程序员三个月写出的编程语言是如何改变世界的？
  2. 表观遗传学及DNA甲基化数据分析
  3. Scratch编程：牛顿的苹果——地心引力
  4. 疫情期间工作证明word模板下载
  5. VUE中简单封装二次确认组件
  6. 和我一起学 Three.js【初级篇】：3. 掌握摄影机
  7. c# html文件转换word,html转word解决方法
  8. jquery formdata上传文件示例
  9. 拟合线性函数的几种方法
  10. ElasticSearch（三）springboot整合ES