这是以前的第一个HTML页面练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商城首页</title>
</head>
<body>
<!--1.创建一个八行一列表格 -->
<table border="1px" width="1350px" align="center">
<!-- 2.logo部分 -->
<tr>
<td>
<!--嵌套一个一行三列表格 -->
<!--这里如果不嵌套一个一行三列表格后面行会出现空白
如果一个表格中在嵌套一个表格必须使用table,不能直接加tr,td.
-->
<table border="1px" width="1350px" height="40px" cellspacing="0px" cellpadding="0px">
<tr>
<td >
<img width="33.3%" height="40px" alt="该图片无法显示" src="image/logo2.png">
</td>
<td align="center">
<img width="33.3%" height="40px" alt="该图片无法显示" src="image/header.png">
</td>
<td width="33.3%" align="center">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- 3.导航栏部分 -->
<tr>
<td height="50px" bgcolor="black">
<a href="#"><font size="5" color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">家用电器</font></a>
</td>
</tr>
<!-- 4.轮播图 -->
<tr>
<td>
<img width="100%" alt="该图片无法显示" src="image/1.jpg">
</td>
</tr>
<!-- 5.最新商品 -->
<tr>
<td>
<!--创建一个三行七列表格 -->
<table border="1px" width="1350px" height="400px" cellspaing="0px">
<tr align="center">
<td rowspan="3">
<img width="200px" alt="该图片无法显示" src="image/big01.jpg">
</td>
<td colspan="3" rowspan="2">
<img width="100%" height="100%" alt="该图片无法显示" src="image/middle01.jpg">
</td>
<!-- <td>13</td> -->
<!-- <td>14</td> -->
<td width="192px" height="33.3%" rowspan="2">
<img width="100%" alt="该图片无法显示" src="image/small03.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%" rowspan="2">
<img width="100%" alt="该图片无法显示" src="image/small04.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%" rowspan="2">
<img width="100%" alt="该图片无法显示" src="image/small05.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
</tr>
<tr>
<!-- <td>22</td> -->
<!-- <td colspan="3">23</td> -->
<!-- <td>24</td> -->
<!-- <td>25</td> -->
<!-- <td width="192px" height="33.3%">26</td> -->
<!-- <td width="192px" height="33.3%">27</td> -->
<!-- <td width="192px" height="33.3%">28</td> -->
</tr>
<tr align="center">
<!-- <td>31</td> -->
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small03.jpg">
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small04.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small05.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small03.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small04.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small05.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font><br>
</td>
</tr>
</table>
</td>
</tr>
<!-- 6.广告图片 -->
<tr>
<td>
<img width="1350px" height="150px" alt="该图片无法显示" src="image/ad.jpg"><br>
</td>
</tr>
<!-- 7.热门商品 -->
<tr>
<td>
<font size="5">热门商品</font>
<img alt="该图片无法显示" src="image/title2.jpg">
</td>
</tr>
<!-- 8.广告图片 -->
<tr>
<td>
<!--创建一个三行七列表格 -->
<table border="1px" width="1350px" height="400px" cellspaing="0px">
<tr align="center">
<td rowspan="3">
<img width="200px" alt="该图片无法显示" src="image/big01.jpg">
</td>
<td colspan="3" rowspan="2">
<img width="100%" height="100%" alt="该图片无法显示" src="image/middle01.jpg">
</td>
<!-- <td>13</td> -->
<!-- <td>14</td> -->
<td width="192px" height="33.3%" rowspan="2">
<img width="100%" alt="该图片无法显示" src="image/small03.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%" rowspan="2">
<img width="100%" alt="该图片无法显示" src="image/small04.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%" rowspan="2">
<img width="100%" alt="该图片无法显示" src="image/small05.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
</tr>
<tr>
<!-- <td>22</td> -->
<!-- <td colspan="3">23</td> -->
<!-- <td>24</td> -->
<!-- <td>25</td> -->
<!-- <td width="192px" height="33.3%">26</td> -->
<!-- <td width="192px" height="33.3%">27</td> -->
<!-- <td width="192px" height="33.3%">28</td> -->
</tr>
<tr align="center">
<!-- <td>31</td> -->
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small03.jpg">
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small04.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small05.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small03.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small04.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font>
</td>
<td width="192px" height="33.3%">
<img width="100%" alt="该图片无法显示" src="image/small05.jpg"><br>
<a href="#"><font color="luck"><strong>冬瓜</strong></font></a><br>
<font color="red">¥299.0</font><br>
</td>
</tr>
</table>
</td>
</tr>
<!-- 9.友情链接和版权信息 -->
<tr>
<td align="center">
<img width="1350px" height="100px" alt="该图片无法显示" src="image/footer.jpg"><br>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式 </a>
<a href="#">配送方式 </a>
<a href="#">服务声明 </a>
<a href="#">广告声明 </a>
<p>Copyright © 2019-2020 ginger商城 版权所有 </p>
</td>
</tr>
</table>
</body>
</html>页面效果展示1
页面效果展示2
