实训四 项目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>
三、页面效果截图：
