1."購物列表"頁面的菜單導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫步時尚廣場</title>
</head>
<body>
<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="shoppingIndex.html" class="white">最新上架</a></li>
<li>品牌活動</li>
<li>原廠直供</li>
<li>團購</li>
<li>限時搶購</li>
<li>促銷打折</li>
</ul>
</div>
</div>
</body>
</html>
預覽如下：
2."購物列表"頁面的左側導航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫步時尚廣場</title>
</head>
<body>
<ul class="menu">
<li><span class="title">女裝</span></li>
<li><span class="red_dot"></span><a href="#">上衣</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">下裝</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">連衣裙</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">內衣</a><span class="right_arrow"></span></li>
<li><span class="title">男裝</span></li>
<li><span class="red_dot"></span><a href="#">T恤</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">短褲</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">襯衫</a><span class="right_arrow"></span></li>
<li><span class="title">童裝</span></li>
<li><span class="red_dot"></span><a href="#">上衣</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">褲子</a><span class="right_arrow"></span></li>
<li><span class="title">運動</span></li>
<li><span class="red_dot"></span><a href="#">運動褲</a><span class="right_arrow"></span></li>
<li><span class="red_dot"></span><a href="#">跑步鞋</a><span class="right_arrow"></span></li>
</ul>
</body>
</html>
預覽如下：
3."購物列表"頁面的商品展示區
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫步時尚廣場</title>
</head>
<body>
<div class="title">
<hl class="pic_title">最新上架</hl>
<div class="pic_list">
<dl>
<div><a href="shoppingDetail.html" target="_blank"></a><img src="images/yifu5.jpg"></div>
<dt><span class="price">￥198.00元</span>
<span class="font12">324人購買</span></dt>
<dd>冬季新款牛仔外套加厚連帽毛領加絨牛仔棉衣</dd>
</dl>
<dl>
<div><img src="images/yifu2.jpg"></div>
<dt><span class="price">￥69.00元</span>
<span class="font12">524人購買</span></dt>
<dd>2015夏新款韓版 透氣舒適簡約半截袖T恤衫</dd>
</dl>
<dl>
<div><img src="images/yifu3.jpg"></div>
<dt><span class="price">￥160.00元</span>
<span class="font12">643人購買</span></dt>
<dd>韓版甜美氣質亮片熱氣球字母中長款圓領短袖T恤</dd>
</dl>
<dl>
<div><img src="images/yifu4.jpg"></div>
<dt><span class="price">￥210.00元</span>
<span class="font12">678人購買</span></dt>
<dd>2015款秋新款甜美學院立領中袖姥姥衫</dd>
</dl>
</div>
</div>
</body>
</html>
預覽如下：
雖然衣服圖片不是很符合衣服標題，但是漂亮呀！！！
4."購物列表"頁面的版權區域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="foot_line"></div>
<p align="center" class="padding - top">Copyright 2015 - 2020 Q - Walking Fashion E&S 漫步時尚廣場（QST教育）版權所有<br/> 中國青島 高新區廣博路 325號 青軟教育集團 諮詢熱線： 400-628-1022</p>
<p align="center"><img src="images/yifu2.jpg"></p>
<div class="clear"></div>
</body>
</html>
預覽如下：
