背景定位案例.png
需求：在导航栏中实现鼠标移入时，产生图标变色效果
知识点：背景定位，hover选择器，元素类型，图片整合技术
<ul>
<li><a href="" class="box1">首页</a></li>
<li><a href="" class="box2">微信学院</a></li>
<li><a href="" class="box3">开放平台学院</a></li>
<li><a href="" class="box4">互联网学院</a></li>
<li><a href="" class="box5">营销学院</a></li>
<li style="margin-right: 0;"><a href="" class="box6">游戏学院</a></li>
</ul>
ul {
width: 736px;
height: 78px;
margin: 50px auto;
}
li {
float: left;
/* 防止低版本浏览器出现阶梯bug，高版本浏览器可以不写 */
margin-right: 2px;
}
/* 共同属性 */
a:hover {
background-image: url(images/nav-on.png);
}
a {
float: left;
/* 行内块元素 */
height: 78px;
line-height: 78px;
text-align: center;
background-image: url(images/nav.png);
text-indent: -88888px;
}
/* 盒子单独属性 */
.box1 {
width: 98px;
}
.box2 {
width: 122px;
background-position: -100px 0;
}
.box3 {
width: 144px;
background-position: -224px 0;
}
.box4 {
width: 118px;
background-position: -370px 0;
}
.box5 {
width: 122px;
background-position: -490px 0;
}
.box6 {
width: 122px;
background-position: -614px 0;
}
原图素材：
nav.png
nav-on.png
