实战案例4：制作淘宝店铺列表页面
一、完整的页面效果图
二、文本素材
淘宝首页> 店铺街> 所有店铺(4626173)
淘店
店铺类目
韩都衣舍旗舰店
主营宝贝：韩都衣舍 2011 现货 8122
山东济南 旗舰店
osa品牌服饰旗舰店
主营宝贝：t恤 连衣裙 女装 696
广东深圳 旗舰店
andostore安都专卖店
主营宝贝：andostore t恤 连衣裙 321
湖北武汉 旗舰店
麦包包箱包官方旗舰店
主营宝贝：包袋 男包 金鱼 alfa 771
浙江嘉兴 旗舰店
车品弘智专营店
主营宝贝：霍尼韦尔 保斯道 1847
上海 旗舰店
优衣库官方旗舰店
主营宝贝：优衣库 女装 t恤 1102
上海 旗舰店
真维斯官方旗舰店
主营宝贝：jeanswest 真维斯 1053
广东惠州 旗舰店
达芙妮官方旗舰店
主营宝贝：daphne 达芙妮 女鞋 110
上海 旗舰店
三、代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝店铺列表</title>
</head>
<body>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/logo.gif" width="140" height="35" /></td>
<td align="right"><img src="images/search.gif" width="600" height="57" /></td>
</tr>
</table>
<br />
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/navbar.gif" width="950" height="34" /></td>
</tr>
<tr>
<td height="30">淘宝首页> 店铺街> 所有店铺(4626173)</td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="190" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="4">
<tr>
<td bgcolor="#e5f1ff"><strong>淘店</strong></td>
</tr>
<tr>
<td><img src="images/shop_search.gif" width="181" height="432" /></td>
</tr>
<tr>
<td bgcolor="#e5f1ff"><strong>店铺类目</strong></td>
</tr>
<tr>
<td><img src="images/category.gif" width="179" height="263" /></td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td></td>
<td width="750" valign="top"><img src="images/list_header.gif" width="750" height="67" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_01.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">韩都衣舍旗舰店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：韩都衣舍 xxxx 现货</td>
<td align="center"><p>8122</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">山东济南</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="1" colspan="6" bgcolor="#eeeeee"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_02.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">osa品牌服饰旗舰店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：t恤 连衣裙 女装</td>
<td align="center"><p>696</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">广东深圳</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="1" colspan="6" bgcolor="#eeeeee"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_03.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">andostore安都专卖店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：andostore t恤 连衣裙</td>
<td align="center"><p>321</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">湖北武汉</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="1" colspan="6" bgcolor="#eeeeee"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_04.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">麦包包箱包官方旗舰店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：包袋 男包 金鱼 alfa</td>
<td align="center"><p>771</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">浙江嘉兴</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="1" colspan="6" bgcolor="#eeeeee"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_05.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">车品弘智专营店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：霍尼韦尔 保斯道</td>
<td align="center"><p>1847</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">上海</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="1" colspan="6" bgcolor="#eeeeee"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_06.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">优衣库官方旗舰店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：优衣库 女装 t恤</td>
<td align="center"><p>1102</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">上海</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="1" colspan="6" bgcolor="#eeeeee"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_07.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">真维斯官方旗舰店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：jeanswest 真维斯</td>
<td align="center"><p>1053</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">广东惠州</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="1" colspan="6" bgcolor="#eeeeee"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="90" height="90" rowspan="3" align="center"><img src="images/shop_ico_08.gif" width="70" height="70" /></td>
<td width="268" height="24"><a href="#">达芙妮官方旗舰店</a></td>
<td width="82" align="center"> </td>
<td width="95" align="center"> </td>
<td width="86" align="center"> </td>
<td align="center"> </td>
</tr>
<tr>
<td height="24">主营宝贝：daphne 达芙妮 女鞋</td>
<td align="center"><p>110</p></td>
<td align="center"><img src="images/online.gif" width="77" height="19" /></td>
<td align="center">上海</td>
<td align="center">旗舰店</td>
</tr>
<tr>
<td height="24"><img src="images/baozhang.gif" width="46" height="15" /></td>
<td align="center"> </td>
<td align="center"><img src="images/icon_shangcheng.gif" width="28" height="16" /></td>
<td align="center"> </td>
<td align="center"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/footer.gif" width="950" height="79" /></td>
</tr>
</table>
</body>
</html>
2698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
