HTML商品详情页（简单页面）

编程知识行业动态更新时间:2024-06-13 00:17:59

纯HTML代码使用方法：将页面和六张商品图片保存在同一文件夹,图片命名1.2.3.4.5.6就可以显示啦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{width: 180px;height: 150px;}
			#div0{width: 720px;height: 500px;border: 1px solid black;text-align: center;margin: 0 auto}
			#div1,#div2,#div3,#div4,#div5,#div6{float: left;width: 210px;height: 180px;margin: 1px;
			text-align: center;vertical-align: middle;border: 3px double black;}
			h3{text-align:center;color: red; }
		</style>
	</head>
	<body>
		<div id="div0">
			<h3>京东商品导购</h3>
			<div id="div1">
				<a href="www.4399">
					<div id="yang">吉普车</div>
						<img src="1.jpg" ">	
				</a>
			</div>
			<div id="div2">
				<a href="www.taobao">
					<div id="yang">大卡车</div>
					<div>
						<img src="2.jpg">
					</div>
					
				</a>
			</div>
			<div id="div3">
				<a href="www.taobao">
					<div id="yang">小轿车</div>
					<div id="jg">$105</div>
					<img src="3.jpg">
				</a>
			</div>
			<div id="div4">
				<a href="www.taobao">
					<div id="yang">军用卡车</div>
					<img src="4.jpg">
				</a>
			</div>
			<div id="div5">
				<a href="www.taobao">
					<div id="yang">装甲战斗车</div>
					<img src="5.jpg">
				</a>
			</div>
			<div id="div6">
				<a href="www.taobao">
					<div id="yang">赛车</div>
					<img src="6.jpg">
				</a>
			</div>
		</div>
	</body>
</html>