A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

图像拼合s - 悬停效果

#navlist{

position:relative;


}
#navlist li{
margin:0;
padding:0;


list-style:none;

position:absolute;


top:0;

}
#navlist li, #navlist a{
height:44px;
display:block;·
}


#home{
left:0px;
width:45px;
}
#home{
background:url('img_navsprites_hover.gif') 0 0;
}
#home a:hover{
background: url('img_navsprites_hover.gif') 0 -45px;
}


#prev{
left:63px;width:43px;
}
#prev{
background:url('img_navsprites_hover.gif') -47px 0;
}
#prev a:hover{
background: url('img_navsprites_hover.gif') -47px -45px;
}


#next{
left:129px;width:43px;
}
#next{
background:url('img_navsprites_hover.gif') -91px 0;
}
#next a:hover{
background: url('img_navsprites_hover.gif') -91px -45px;
}
</style>
</head>


<body>
<ul id="navlist">
  <li id="home"><a href="default.asp"></a></li>
  <li id="prev"><a href="css_intro.asp"></a></li>
  <li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>



实例解析:
#navlist{position:relative;} - 位置设置相对定位,让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0,列表样式被删除,所有列表项是绝对定位
#navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
现在开始每个具体部分的定位和样式:
#home{left:0px;width:46px;} - 定位到最左边的方式,以及图像的宽度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置(左0px,顶部0px)
#prev{left:63px;width:43px;} - 右侧定位63px(#home宽46px+项目之间的一些多余的空间),宽度为43px。
#prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px(#home宽46px+分隔线的1px)
由于该列表项包含一个链接,我们可以使用:hover伪类
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像,我们指定相同的背景位置,只是每个再向下45px







图像拼合
图像拼合就是单个图像的集合。
有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求。
使用图像拼合会降低服务器的请求数量,并节省带宽。
---------------------
【转载,仅作分享,侵删】
作者:前端小99
原文:https://blog.csdn.net/qq_41328247/article/details/80000200
版权声明:本文为博主原创文章,转载请附上博文链接!

1 个回复

倒序浏览
奈斯,感谢分享
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马