实训四 项目15

一、页面文字素材：

[Vinhas]彩色斑马系列单肩包 黑色
[Adidas]休闲帆布鞋 红色
[NB]女子复古鞋 色灰
[Vans]女子硫化鞋 白粉
[Converse]匡威经典低帮鞋 黑色
[Belle]羊皮女鞋 黑色

二、代码：

<!--prj_4_2.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				width: 186px;
				height: 205px;
			}
			#div0{
				width: 720px;
				height: 600px;
				border: 1px solid #0099ff;
				margin: 0 auto;
				text-align: center;
			}
			h3{
				text-align: center;
				font-size: 32px;
				color: red;
			}
			#div1,#div2,#div3,#div4,#div5,#div6{
				margin: 10px;
				border: 1px double #9999cc;
				float: left;
				text-align: center;
				width: 208px;
				height: 225px
			}
			div a img{
				border: 10px groove #9999cc;
			}
			div a:hover img{
				border: 10px dashed #9999CC;
			}
		</style>
	</head>
	<body>
		<div id="div0">
			<h3>京东商品导购</h3>
			<div id="div1" class="">
				<a href="#"><img src="../img/4/image41-1.jpg" alt="[Vinhas]彩色斑马系列单肩包 黑色"></a>
			</div>
			<div id="div2" class="">
				<a href="#"><img src="../img/4/image41-2.jpg" alt="[Adidas]休闲帆布鞋 红色"></a>
			</div>
			<div id="div3" class="">
				<a href="#"><img src="../img/4/image41-3.jpg" alt="[NB]女子复古鞋 色灰"></a>
			</div>
			<div id="div4" class="">
				<a href="#"><img src="../img/4/image41-4.jpg" alt="[Vans]女子硫化鞋 白粉"></a>
			</div>
			<div id="div5" class="">
				<a href="#"><img src="../img/4/image41-5.jpg" alt="[Converse]匡威经典低帮鞋 黑色"></a>
			</div>
			<div id="div6" class="">
				<a href="#"><img src="../img/4/image41-6.jpg" alt="[Belle]羊皮女鞋 黑色"></a>
			</div>
		</div>
	</body>
</html>

三、页面效果截图：

 

更多推荐

web前端开发技术实验与实践（第三版）储久良编著 项目15 设计京东商品导航页面