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>
				</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>
							<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" />
				</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><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商城&copy;2019~2025</p>
				</td>
			</tr>
		</table>
	</body>
</html>

以下为部分运行展示:

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页