900字范文 > 静态HTML网页设计作品商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前

静态HTML网页设计作品商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前

时间：2020-03-11 19:54:09

HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计

文章目录

HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计一、作品展示二、文件目录三、代码实现四、学习资料

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>蘑菇街 - 我的买手街！</title><link href="image/favicon.ico" type="image/x-icon" rel="shortcut icon" /> <link type="text/css" rel="stylesheet" href="css/index.css" /><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/index.js"></script></head><body><div class="mgj_rightbar"><div class="mgj-my-cart"><a class="nofollow" href="javascript:;"><i class="s-icon"></i><div class="s-txt">购物车</div></a></div><div class="mgj-my-coupon"><a class="nofollow" href="javascript:;"><i class="s-icon"></i><div class="s-txt">优惠券</div></a></div><div class="mgj-my-wallet"><a class="nofollow" href="javascript:;"><i class="s-icon"></i><div class="s-txt">钱包</div></a></div><div class="mgj-my-browserlog"><a class="nofollow" href="javascript:;"><i class="s-icon"></i><div class="s-txt">足迹</div></a></div><div class="sideBottom"><a class="nofollow" href="javascript:;"><i class="s-icon"></i></a></div></div><div class="head"><div class="head-top"><ul><li class="wodexiaodian"><a class="wd" href="../mgjz/index.html">我的小店</a></li><li class="khfw"><a class="fw" href="#">客户服务<ul class="khfwtk"><li>联系合作</li><li>帮助</li></ul></a></li><li class="gouwuche"><a class="gwc" href="#">购物车<ul class="gwctk"><li>购物车里没有商品！</li></ul></a></li><li class="dingdan"><a class="dd" href="#">我的订单</a></li><li ><a class="dl" href="#">登录</a></li><li ><a class="zc" href="#">注册</a></li></ul></div><div class="head-main"><img class="logo" src="picture/head-top-logo.png" /><span class="s1">搜商品<div class="ss1">店铺</div></span><input class="s2" type="text" value="既保暖性又时尚感棉服"/><input class="s3" type="button" /><div class="sao"><img src="picture/head-main-erweima.png" /><span class="mgj">蘑菇街客户端</span></div> <ul><li><a href="#">毛衣</a></li><li><a href="#">雪地靴</a></li> <li><a href="#">羽绒服</a></li><li><a href="#">毛呢外套</a></li> <li><a href="#">连衣裙</a></li> <li><a href="#">家居服</a></li> <li><a href="#">打底裤</a></li> <li><a href="#">包包</a></li> <li><a href="#">打底衫</a></li></ul> </div> <div class="head-foot"><ul class="daohang"><li class="sk">全部商品</li><li><a href="#">团购</a></li><li><a href="#">品牌</a></li><li><a href="#">海淘馆</a></li><li><a href="#">红人Bazaar</a></li></ul></div> </div><div class="banner"><div class="left"><ul class="ul"><div class="left-tanchuang"><dl><dt><a href="#">新品发布</a></dt><dd><ul class="clearfix"><li><a href="#">新款外套</a></li><li><a class="red" href="#">羽绒服</a></li><li><a href="#">毛呢外套</a></li><li><a href="#">毛衣</a></li><li><a href="#">卫衣</a></li><li><a href="#">针织衫</a></li><li><a href="#">时尚套装</a></li><li><a href="#">风衣</a></li><li><a href="#">衬衫</a></li><li><a href="#">长袖T恤</a></li><li><a href="#">棒球外套</a></li><li><a href="#">牛仔外套</a></li><li><a href="#">开衫</a></li></ul></dd><dt><a href="#">当季热卖</a></dt><dd><ul class="clearfix"><li><a href="#">打底衫</a></li><li><a class="red" href="#">御寒长款</a></li><li><a href="#">套头衫</a></li><li><a href="#">保暖短款</a></li><li><a href="#">纯棉衬衫</a></li><li><a href="#">格纹衬衫</a></li><li><a href="#">毛呢外套</a></li><li><a href="#">蕾丝衫</a></li><li><a href="#">运动套装</a></li><li><a href="#">西装外套</a></li><li><a href="#">雪纺衫</a></li></ul></dd><dt><a href="#">流行元素</a></dt><dd><ul class="clearfix"><li><a href="#">太空棉</a></li><li><a href="#">廓形</a></li><li><a href="#">条纹</a></li><li><a href="#">格子</a></li><li><a href="#">印花</a></li><li><a class="red" href="#">流苏</a></li><li><a href="#">字母</a></li><li><a href="#">蕾丝</a></li><li><a href="#">波点</a></li><li><a href="#">纯色</a></li><li><a href="#">前短后长</a></li></ul></dd><div class="xiao-banner"><a href="#"><img src="picture/xiao-banner1.jpg" /></a></div></dl></div> <li class="li"><dl><dt class="dt"><a class="a" href="#">上衣</a></dt><dd class="dd"><a class="a red" href="#">冬季热卖</a><ins></ins><a class="a" href="#">棉衣</a><ins></ins><a class="a" href="#">必备内搭</a></dd></dl></li></ul><ul class="ul"><div class="left-tanchuang left-tanchuang2"><dl><dt><a href="#">新品发布</a></dt><dd><ul class="clearfix"><li><a href="#">针织裙</a></li><li><a class="red" href="#">韩范美裙</a></li><li><a href="#">半身裙</a></li><li><a href="#">毛衣裙</a></li><li><a href="#">毛呢裙</a></li><li><a href="#">包臀裙</a></li><li><a href="#">收腰裙</a></li><li><a href="#">衬衫裙</a></li><li><a href="#">牛仔裙</a></li><li><a href="#">长袖连衣裙</a></li><li><a href="#">卫衣裙</a></li></ul></dd><dt><a href="#">当季热卖</a></dt><dd><ul class="clearfix"><li><a href="#">裙子套装</a></li><li><a class="red" href="#">连衣裙</a></li><li><a href="#">T恤裙</a></li><li><a href="#">背带裙</a></li><li><a href="#">针织裙</a></li><li><a href="#">气质美裙</a></li><li><a href="#">伞裙</a></li><li><a href="#">长裙</a></li><li><a href="#">小白裙</a></li></ul></dd><dt><a href="#">女神最爱</a></dt><dd><ul class="clearfix"><li><a href="#">甜美</a></li><li><a href="#">时尚套装</a></li><li><a href="#">韩范</a></li><li><a href="#">气质</a></li><li><a href="#">清新女神</a></li><li><a class="red" href="#">一步裙</a></li><li><a href="#">飘逸长裙</a></li><li><a href="#">流苏</a></li></ul></dd><dt><a href="#">流行元素</a></dt><dd><ul class="clearfix"><li><a href="#">修身显瘦</a></li><li><a href="#">韩版</a></li><li><a href="#">纯棉</a></li><li><a href="#">高腰</a></li><li><a href="#">直筒</a></li><li><a class="red" href="#">阔腿</a></li><li><a href="#">灯笼</a></li><li><a href="#">蕾丝</a></li><li><a href="#">卡通</a></li></ul></dd><div class="xiao-banner"><a href="#"><img src="picture/xiao-banner3.jpg" /></a></div></dl></div> <li class="li"><dl><dt class="dt"><a class="a" href="#">裤子</a></dt><dd class="dd"><a class="a" href="#">冬上新</a><ins></ins><a class=" a red" href="#">加绒打底</a><ins></ins><a class="a" href="#">牛仔裤</a></dd></dl></li></ul><ul class="ul"><div class="left-tanchuang left-tanchuang4"><dl><dt><a href="#">内衣</a></dt><dd><ul class="clearfix"><li><a href="#">新款外套</a></li><li><a class="red" href="#">内衣套装</a></li><li><a href="#">调整型内衣</a></li><li><a href="#">文胸</a></li><li><a href="#">内裤</a></li><li><a href="#">保暖内衣</a></li><li><a href="#">无痕内衣</a></li><li><a href="#">性感内衣</a></li><li><a href="#">运动内衣</a></li> </ul></dd><dt><a href="#">家居睡衣</a></dt><dd><ul class="clearfix"><li><a href="#">冬季睡衣</a></li><li><a class="red" href="#">珊瑚绒</a></li><li><a href="#">家居服</a></li><li><a href="#">睡裙</a></li><li><a href="#">甜美家居服</a></li><li><a href="#">情侣睡衣</a></li><li><a href="#">睡袍</a></li><li><a href="#">性感睡衣</a></li></ul></dd><dt><a href="#">袜子</a></dt><dd><ul <dd><a href="#">关于我们</a></dd><dd><a href="#">招聘信息</a></dd><dd><a href="#">联系我们</a></dd></dl><dl><dt>消费者</dt><dd><a href="#">帮助中心</a></dd><dd><a href="#">意见反馈</a></dd><dd><a href="#">手机版下载</a></dd></dl><dl><dt>商家</dt><dd><a href="#">免费开店</a></dd><dd><a href="#">商家社区</a></dd><dd><a href="#">商家入驻</a></dd><dd><a href="#">管理后台</a></dd></dl><dl><dt>权威认证</dt><dd><a href="#">免费开店</a></dd><dd><a href="#">商家社区</a></dd><dd><a href="#">商家入驻</a></dd><dd><a href="#">管理后台</a></dd></dl></div></div><div class="foot-bottom banxin"><dl><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><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><dd><a href="#">播视网视频</a></dd> </dl></div></div></body></html>