html实现简易商城⽹页设计 该⽅式是通过table表格标签来实现，但该标签的弊端：⼀旦表格⾼度变化，整个表格布局出问题了！！
在以后的开发过程中，更多的会⽤到块标签。
将在后续的学习中涉及到。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：offline
时间：2019-04-11
描述：最外层需要⼀个8⾏1列的表格
第⼀部分：loge部分
1⾏3列的表格
第⼆部分：导航栏部分
⼀堆超链接加背景⾊
第三部分：轮播图
第四部分：最新商品
3⾏7列的表格
第五部分：⼴告部分
第六部分：热门商品同第四部分
第七部分：底部页脚部分
第⼋部分：⼀堆超链接
-->
<table width="100%">
<!--
作者：offline
时间：2019-04-11
描述：第⼀部分
-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="C:\Users\Lenovo\Desktop\img\logo2.png" />
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\header.png" />
</td>
<td>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--第⼆部分-->
<tr bgcolor="black">
<td height="50px">
<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>
<a href="#"><font color="white">⼿机数码</font></a>
<a href="#"><font color="white">其他户外</font></a>
</td>
</tr>
<!--第三部分-->
<tr>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" width="100%" />
</td>
</tr>
<!--第四部分
最新商品：3⾏7列的表格
-->
<tr>
<td>
<table height="300px" width="100%" align="center">
<tr>
<td colspan="7">
<h3>最新商品<img src="C:\Users\Lenovo\Desktop\img\title2.jpg"</h3>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="C:\Users\Lenovo\Desktop\img\2.jpg" height="200px" width="100px"/> </td>
<td colspan="3">
<img src="C:\Users\Lenovo\Desktop\img\3.jpg" height="100px" width="300px"/> </td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</
a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第五部分：⼴告图⽚-->
<tr>
<td width="100%">
<img src="C:\Users\Lenovo\Desktop\img\header.png" />
html网页设计论文</td>
</tr>
<!--第六部分-->
<tr>
<td>
<table height="300px" width="100%" align="center">
<tr>
<td colspan="7">
<h3>最新商品<img src="C:\Users\Lenovo\Desktop\img\title2.jpg"</h3>
</td>
</tr>
<tr>
<td rowspan="2">
<img src="C:\Users\Lenovo\Desktop\img\2.jpg" height="200px" width="100px"/> </td>
<td colspan="3">
<img src="C:\Users\Lenovo\Desktop\img\3.jpg" height="100px" width="300px"/> </td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="C:\Users\Lenovo\Desktop\img\1.jpg" height="100px" width="100px"/> <p><a>鸳鸯锅</a></p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第七部分-->
<tr>
<td>
<img src="C:\Users\Lenovo\Desktop\img\footer.jpg" width="100%"/>
</td>
</tr>
<!--第⼋部分-->
<tr>
<td align="center">
<a href="#"></a>
<a href="#">关于我们</a>
<a href="#">投诉建议</a>
<br />
<p>xxx商城©2019~2025</p>
</td>
</tr>
</table>
</body>
</html>
以下为部分运⾏展⽰：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论