(一) 作业：制作淘宝店铺列表页面
- 训练要点
(1) . 掌握表格、单元格的属性
(2) . 使用表格的嵌套制作网页 - 实现思路
(1) . 根据页面结构布局整体页面
(2) . 合理地在单元格中嵌套表格
(3) . 设置单元格的跨行或跨列
(4) . 设置单元格的水平对齐方式 - 效果图
<!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-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝店铺</title>
</head>
<body>
<table width="950" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left"> <img src="淘宝图片/logo.gif" width="140" height="35" /></td>
<td align="right"> <img src="淘宝图片/search.gif" width="600" height="57" /></td>
</tr>
<tr>
<td colspan="2" height="20"></td>
</tr>
</table>
<table>
<tr><img src="淘宝图片/navbar.gif" width="950" height="34" /></tr>
<td colspan="2"> 淘宝首页>店铺街>所有店铺（4626173）</td>
</tr>
<tr>
<td valign="top">
<table width="191" cellpadding="0" cellspacing="0">
<tr>
<td width="189" bgcolor="#E5F1FF"><strong>淘店</strong></td>
</tr>
<tr>
<td>
<img src="淘宝图片/shop_search.gif" width="181" height="432" />
</td>
</tr>
<tr>
<td bgcolor="#E5F1FF"><strong>店铺类目</strong> </td>
</tr>
<tr>
<td>
<img src="淘宝图片/category.gif" width="179" height="263" />
</td>
</tr>
</table>
</td>
<td>
<table width="750" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="淘宝图片/list_header.gif" width="900" height="67" />
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="14%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_01.gif" width="70" height="70" />
</td>
<td width="35%">韩都衣舍旗舰店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">8122</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
山东济南
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝：韩都衣舍 2011 现货</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_02.gif" width="70" height="70" />
</td>
<td width="33%">osa品牌服饰旗舰店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">
696</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
广东深圳
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝:t恤 连衣裙 女装</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_03.gif" width="70" height="70" />
</td>
<td width="34%">andostore安都专卖店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">
321</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
湖北武汉
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝:andostore t恤 连衣裙</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="14%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_04.gif" width="70" height="70" />
</td>
<td width="35%">麦包包箱包官方旗舰店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">
771</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
浙江嘉兴
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝：包袋 男包 金鱼 alfa</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_05.gif" width="70" height="70" />
</td>
<td width="33%">车品弘智专营店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">
1874</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
上海
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝：霍尼韦尔 保斯道</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_06.gif" width="70" height="70" />
</td>
<td width="33%">优衣库官方旗舰店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">
1102</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
上海
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝：优衣库 女装 t恤</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_07.gif" width="70" height="70" />
</td>
<td width="34%">真维斯官方旗舰店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">
1053</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
广东惠州
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝：jeanswest 真维斯</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="17%" height="100" rowspan="3" align="center" valign="middle">
<img src="淘宝图片/shop_ico_08.gif" width="70" height="70" />
</td>
<td width="32%">达芙妮官方旗舰店 </td>
<td width="8%" height="100" rowspan="3" align="center" valign="middle">
110</td>
<td width="18%"></td>
<td width="12%" height="100" rowspan="3" align="center" valign="middle">
上海
</td>
<td width="13%" height="100" rowspan="3" align="center" valign="middle">
旗舰店
</td>
</tr>
<tr>
<td>主营宝贝：daphne 达芙妮</td>
<td><img src="淘宝图片/online.gif" width="77" height="19" />
</td>
<tr>
<td> <img src="淘宝图片/baozhang.gif" width="46" height="15" />
<td> <img src="淘宝图片/icon_shangcheng.gif" width="28" height="16" /> </td>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3" align="center" valign="middle" height="100">
<img src="淘宝图片/footer.gif" width="950" height="79" />
</td>
</table>
</body>
</html>
网友评论