當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/3/26 HTML 49 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS大作业：服装购物网站设计——粉色服装购物商城(4页) 服装购物商城网页设计作品大学生购物专题网页设计作业模板商店静态HTML网页模板下载小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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="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="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="images/pic1.jpg" /></a><h4><a href="" target="_blank">美女玩家獵魔人 Cosplay</a></h4></li><li><a href="" target="_blank"><img src="images/pic2.jpg" /></a><h4><a href="#">《第2次機戰OG》魔裝機神系機體情報</a></h4></li><li><a href="" target="_blank"><img src="images/pic3.jpg" /></a><h4><a href="#">Dreamhack冬季賽：Hero奪冠香檳狂歡</a></h4></li><li><a href="" target="_blank"><img src="images/pic4.jpg" /></a><h4><a href="#">妹子戰喪尸！Bioware王牌畫師插畫賞</a></h4></li><li><a href="" target="_blank"><img src="images/pic5.jpg" /></a><h4><a href="#">《刺客信條3》簡體中文版已送審</a></h4></li><li><a href="" target="_blank"><img src="images/list1.jpg" /></a><h4><a href="#">《上古世紀》中文版截圖獨家曝光</a></h4></li><li><a href="" target="_blank"><img src="images/list2.jpg" /></a><h4><a href="#">本周精選大濕級Cos欣賞佐助親吻小櫻</a></h4></li><li><a href="" target="_blank"><img src="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="images/pic1.jpg" /></a></li><li><a><img src="images/pic2.jpg" /></a></li><li><a><img src="images/pic3.jpg" /></a></li><li><a><img src="images/pic4.jpg" /></a></li><li><a><img src="images/pic5.jpg" /></a></li><li><a><img src="images/list1.jpg" /></a></li><li><a><img src="images/list2.jpg" /></a></li><li><a><img src="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="images/tx.jpg" /></a></div><div class="fr"><p>辣辣</p><p><span class="b1"> </span><span>你是否也在尋找一款簡約卻絕不簡單的包包，多種色彩多搭配，散發一種低調的時尚感。</span><span class="b2"> </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"> </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"> </span>4.5分（已有<a href="">14人評價</a>，<a href="">2條曬單</a>）</li><li><span class="short">顏色</span><span class="img"><img src="images/1.1.jpg" /></span><span class="img"><img src="images/1.2.jpg" /></span><span class="img"><img src="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="images/pc_bao_new.png" /></a><p class="da"><a href="">全場免運費</a></p><p><a href="">無最低消費限制</a></p></li><li><a href=""><img src="images/pc_seven_new.png" /></a><p class="da"><a href="">七天無理由退款</a></p><p><a href="">輕松購物有保障</a></p></li><li><a href=""><img src="images/pc_pei_new.png" /></a><p class="da"><a href="">退貨補貼運費</a></p><p><a href="">輕松購物有保障</a></p></li><li><a href=""><img src="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="images/pc_bao_new.png" /></a><p class="da"><a href="">全場免運費</a></p><p><a href="">無最低消費限制</a></p></li><li><a href=""><img src="images/pc_seven_new.png" /></a><p class="da"><a href="">七天無理由退款</a></p><p><a href="">輕松購物有保障</a></p></li><li><a href=""><img src="images/pc_pei_new.png" /></a><p class="da"><a href="">退貨補貼運費</a></p><p><a href="">輕松購物有保障</a></p></li><li><a href=""><img src="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>