聚焦.png
需求：多商品展示时，当鼠标经过商品，显示一个聚焦效果（将聚焦效果的图片作为背景）。
知识点：display:none和block之间的应用；使用基线实现图片的vertical-align 垂直对齐效果
<ul>
<!--快捷生成方法： li*7>img[src="images/logo$.png"] -->
<li><img src="images/logo1.png" alt=""><span></span></li>
<li><img src="images/logo2.png" alt=""><span></span></li>
<li><img src="images/logo3.png" alt=""><span></span></li>
<li><img src="images/logo4.png" alt=""><span></span></li>
<li><img src="images/logo5.png" alt=""><span></span></li>
<li><img src="images/logo6.png" alt=""><span></span></li>
<li><img src="images/logo7.png" alt=""><span></span></li>
</ul>
ul{
width: 1000px;
height: 100px;
margin: 100px auto;
}
li{
width: 100px;
height: 100px;
float: left;
margin: 0 10px;
}
li:hover{
background: url(images/bg.png) no-repeat center;
}
img{
margin: 10px 0 0 10px;
}
/* 添加参考物，基线实现垂直对齐效果 */
span{
display: inline-block;
width: 0px;
height: 100%;
}
span,img{
vertical-align: middle;
}
