京东购物页面的简单实现(2019/03/12)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table width="100%"><!--Use border if there is discrepancy between table and intended effect-->
<!--part one:nest a table with 1 row and 3 columns-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="img/11.png" width="70%"/>
</td>
<td>
<img src="img/12.png" width="70%"/>
</td>
<td>
<img src="img/13.png" width="70%"/>
</td>
<td>
<img src="img/14.png" width="70%"/>
</td>
</tr>
</table>
</td>
</tr>
<!--part two:place five hyperlinks-->
<tr bgcolor="crimson">
<td height="70px">
<a href="#"><font color="black"> 首页</font></a>
<a href="#"><font color="black">手机数码</font></a>
<a href="#"><font color="black">鞋靴箱包</font></a>
<a href="#"><font color="black">电脑办公</font></a>
<a href="#"><font color="black">香烟酒水</font></a>
</td>
</tr>
<!--part three:slideshow(轮播图)-->
<tr>
<td>
<img src="img/31.png" width="100%"/><!--if the image is too large,set it to 100%-->
</td>
</tr>
<!--part four:nest a table with 3 rows and 7 columns-->
<tr>
<td>
<img src="img/41.png" width="100%" />
</td>
</tr>
<tr>
<td>
<table width="100%" height="600px">
<tr align="center">
<td colspan="2" rowspan="2">
<img src="img/51.png" width="100%"/>
<p>五粮液股份 五粮情精品 浓香型52度白酒</p>
<p><font color="red">$559</font></p>
</td>
<td colspan="2" rowspan="2">
<img src="img/51.png" width="100%"/>
<p>五粮液股份 五粮情精品 浓香型52度白酒</p>
<p><font color="red">$559</font></p>
</td>
<td colspan="2" rowspan="2">
<img src="img/51.png" width="100%"/>
<p>五粮液股份 五粮情精品 浓香型52度白酒</p>
<p><font color="red">$559</font></p>
</td>
</tr>
<tr></tr>
</table>
</td>
</tr>
<!--part five:place a picture-->
<tr>
<td></td>
</tr>
<!--part six:copy the part three-->
<tr>
<td></td>
</tr>
<!--part seven:place a picture-->
<tr>
<td></td>
</tr>
<!--part eight:place hyperlink-->
<tr>
实现效果如下