京东购物页面的简单实现(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>

实现效果如下
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/FZUMRWANG/article/details/88412964