实战案例3:制作易趣网商品列表页面
一、完整的页面效果图
二、代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>易趣网 商品列表</title>
</head>
<body>
<p><img src="images/header.jpg" /></p>
<p>首页 > 中国馆 > 女装/女士精品 > 所有商品</p>
<p><img src="images/list_header.jpg" /></p>
<h2>热点推荐</h2>
<dl>
<dt><img src="images/photo_01.jpg" /></dt>
<dd>一口价:49.00<br />
全国包邮!韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl>
<p><img src="images/line.gif" /></p>
<dl>
<dt><img src="images/photo_02.jpg" /></dt>
<dd>一口价:35.00<br />
2011新款T恤短袖 t恤女短袖 影子熊猫</dd>
</dl>
<p><img src="images/line.gif" /></p>
<dl>
<dt><img src="images/photo_03.jpg" /></dt>
<dd>一口价:48.00<br />
钉珠蝴蝶结秋冬背心呢料裙911 -4366</dd>
</dl>
<p><img src="images/line.gif" /></p>
<dl>
<dt><img src="images/photo_04.jpg" /></dt>
<dd>一口价:88.00<br />
2011 春装 新款 女装 假两件拼接修身包臀裙 洋装 长袖连衣裙</dd>
</dl>
<p><img src="images/line.gif" /></p>
<dl>
<dt><img src="images/photo_05.jpg" /></dt>
<dd>一口价:169.00<br />
卖家推荐 2011春装新款 时尚韩版 假两件式 百褶 连衣裙 0210806 热销款</dd>
</dl>
<p><img src="images/line.gif" /></p>
<dl>
<dt><img src="images/photo_06.jpg" /></dt>
<dd>一口价:98.00<br />
波西米亚 民族风格 扎染珠片 多穿裙 沙滩</dd>
</dl>
<p><img src="images/line.gif" /></p>
<p>Copyright © xxxx 易趣版权所有</p>
</body>
</html>
注:其中全部图片存放在文件夹images下