第四章
注: 素材图片路径需要根据实际情况修改
任务4-1
<!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-eqaiv="Content - Type" content="text/html;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%px;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>
<!-- 菜单导航栏 start-->
<div class="nav_bg">
<div class="nav_content">
<ul class="nav">
<li><a href="shoppipgIndex.html" class="white">首页</a></li>
<li class="nav_active">
<a href="shoppipgShow.html" class="white">最新上架</a></li>
<li>品牌活动</li>
<li>原厂直供</li>
<li>团购</li>
<li>限时抢购</li>
<li>促销打折</li>
</ul>
</div>
</div>
<!-- 菜单导航栏 end-->
</body>
</html>
运行截图：
任务4-2
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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>
<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:700;color:red;float:left}
.price2{font-size:12px;font-weight:700;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>
<!--中间区 start-->
<div class="middle">
<hl class="pic_title">最新上架</hl>
<div class="pic_list">
<dl>
<div><a href="shoppingDetail.html" target="_blank">
<img src="images/shopshow/yifu1.jpg" /></a></div>
<dt><span class="price">$198.00元</span>
<span class="font12">324人购买</span></dt>
<dd>冬季新款牛仔外套加厚连衣帽毛领加绒牛仔棉衣</dd>
</dl>
<dl>
<div><img src="images/shopshow/yifu2.jpg" /></div>
<dt><span class="price">$69.00元</span>
<span class="font12">534人购买</span></dt>
<dd>2015夏季新款韩版 透气舒适简约半截袖T恤衫</dd>
</dl>
...<!-- 此处省略其他最新上架商品 -->
</div>
<!-- 品牌活动 -->
<hl class="pic_title">品牌活动</hl>
<ul class="pic_list2">
<li><img src="images/shopshow/dress1.jpg" />
<p>独家制定 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙</p>
</li>
<li><img src="images/shopshow/dress2.jpg" />
<p>夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙</p>
</li>
<li><img src="images/shopshow/dress3.jpg" />
<p>爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙</p>
</li>
<li><img src="images/shopshow/dress4.jpg" />
<p>亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙</p>
</li>
</ul>
</div>
<!-- 中间区 end -->
</body>
</html>
运行截图：
