Web前端设计与开发-课后任务-漫步时尚广场代码

第一章

图片素材路径根据实际情况进行修改

任务1-1

<!--菜单导航栏 start--><div class = "nav_bg"><div class = "nav_content"><ul class = "nav"><li><a href ="shoppingIndex.html" class = "white">首页</a></li><li class = "nav_active"><a href = "shoppingShow.html" class = "white">最近上架</a></li><li>品牌活动</li><li>原厂直供</li><li>团购</li><li>限时抢购</li><li>促销打折</li></ul></div></div><!--菜单导航栏 end-->

运行结果

任务1-2

<!--购物分类 start--><ul class = "menu"><li><span class="title">女装</span></span></li><li><span class="red_dot"></span><a herf="#">上衣</a><span class="right_arrow"></span></li><li><span class="red_dot"></span><a herf="#">下装</a><span class="right_arrow"></span></li><li><span class="red_dot"></span><a herf="#">连衣裙</a><span class="right_arrow"></span></li><li><span class="red_dot"></span><a herf="#">内衣</a><span class="right_arrow"></span></li><li><span class="title">男装</span></span></li><li><span class="red_dot"></span><a herf="#">T恤</a><span class="right_arrow"></span></li><li><span class="red_dot"></span><a herf="#">短裤</a><span class="right_arrow"></span></li><li><span class="red_dot"></span><a herf="#">衬衫</a><span class="right_arrow"></span></li><li><span class="title">童装</span></span></li><li><span class="red_dot"></span><a herf="#">上衣</a><span class="right_arrow"></span></li><li><span class="red_dot"></span><a herf="#">裤子</a><span class="right_arrow"></span></li><li><span class="title">运动</span></span></li><li><span class="red_dot"></span><a herf="#">运动裤</a><span class="right_arrow"></span></li><li><span class="red_dot"></span><a herf="#">跑鞋</a><span class="right_arrow"></span></li></ul><!--购物分类 end-->

运行结果

任务1-3

<!--中间区 start--><div class ="middle"><h1 class ="pic_title">最新上架</h1><div class="pic_list"><dl><div><a href ="shoppingDetail.html" target="_blank"><img src="C:\Users\Administrator\Desktop\yifu1.jpg"/></a></div><dt><span class="price">¥198.00 元</span><span class="font12">324 人购买</span></dt><dd>冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣</dd></dl><dl><div><img src="C:\Users\Administrator\Desktop\yifu2.jpg"/></div><dt><span class="price">¥69.00 元</span><span class="font12">534 人购买</span></dt><dd>夏新款韩版 透气舒适简约半截袖T恤衫</dd></dl><dl><div><img src="C:\Users\Administrator\Desktop\yifu3.jpg"/></div><dt><span class="price">¥160.00 元</span><span class="font12">643 人购买</span></dt><dd>韩版甜美气质亮片热气球字母中长款圆领短袖T恤</dd></dl><dl><div><img src="C:\Users\Administrator\Desktop\yifu4.jpg"/></div><dt><span class="price">¥210.00 元</span><span class="font12">678 人购买</span></dt><dd>款秋新款甜美学院立领中袖套头格子衬衫娃娃衫</dd></dl><!--其他商品展示代码相似，此处省略--></div></div><!--中间区 end-->

运行结果

任务1-4

<div class ="foot_line"></div><p align="center" class="padding-top">Copyright - Q- WalkingFashion E&S 漫步时尚广场(QST教育)版权所有<br/> 中国青岛 高新区广博路325号青软教育集团 咨询热线：400- 658- 0166 400- 658- 1022</p><p align="center"><img src="C:\Users\Administrator\Desktop\foot_pic.jpg"></p><div class="clear"></div></div>

运行结果