1.css美化的菜單導航欄
預覽如下：
shoppingShow_menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜單導航欄-購物列表</title>
<style type="text/css">
*{padding: 0;margin: 0}
li,ul{list-style: none;}
.nav_bg{background: #ce2626;width: 100%;color: #fff}
.nav_content{width: 100%;margin: 0 auto;height: 40px;line-height: 40px}
.nav{width: 100%;float: left;margin-left: 200px}
.nav li{font-size: 16px;font-weight: 700;color: #fff;width: 80px;float: left;text-align: center;margin-right: 15px}
.orange{font-weight: 700;color: #f60}
.nav_active{background: #b12121}
a.white{color: #fff;text-decoration: none;}
a.white:hover{color: #ff0;text-decoration: none;}
</style>
</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.css美化的商品展示區
預覽如下：
shoppingShow_goods.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漫步時尚廣場-購物列表-商品展示</title>
<style type="text/css">
*{padding: 0;margin: 0}
li,ul{list-style: none;}
body{font-size: 12px;font-family: microsoft yahei;margin: 0;color: #000}
.middle{float: left;width: 690px}
.pic_list{float: left;}
.pic_list dl{float: left;width: 152px;margin: 0 10px 10px}
.price{font-size: 15px;font-weight: 700px;color: red;float: left;}
.price2{font-size: 12px;font-weight: 700px;color: red;text-align:center;}
.font12{font-size: 12px;color: #ccc;float: right;}
.pic_list dl img{padding: 5px;border: 1px solid #ccc;margin-bottom: 10px}
.pic_list dl dd{float: left;}
.pic_title{background: #ff9c01;line-height: 40px;font-size: 16px;text-indent: 20px;text-align: left;width: 680px;float: left;color: #fff;margin: 0 10px 10px}
.pic_list2 li{float: left;}
.pic_list2{margin: 0 6px 0 12px}
.pic_list2 li{width: 160px;float: left;margin: 5px 4px}
</style>
</head>
<body>
<div class="middle">
<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>
<hl class="pic_title">品牌活動</hl>
<ul class="pic_list2">
<li>
<img src="images/dress1.jpg">
<p>獨家定製V雙層歐根紗裏襯 色織時裝料大牌範蓬蓬長裙</p>
</li>
<li>
<img src="images/dress2.jpg">
<p>夏季新款 子域D565E簡約通勤腰帶修身大擺短袖連衣裙</p>
</li>
<li>
<img src="images/dress3.jpg">
<p>愛美斯2015夏季優雅顯瘦大擺長裙 中長款復古印花淑女裙</p>
</li>
<li>
<img src="images/dress4.jpg">
<p>億婷2015夏女裝新品顯瘦飄逸黑白豎條紋闊腿褲七分褲裙</p>
</li>
</ul>
</div>
</body>
</html>