CSS Sprites技术使用方法

发布时间:2020-11-21编辑:脚本学堂
有些人把CSS Sprites叫css精灵或css雪碧,是把网页中一些背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置上,从而可以减少文件体积,减少对服务器的请求次数,提高了工作效率。具体使用方法看下面文章的介绍。

如下:
 

复制代码 代码示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
#nav ul { list-style: none; margin: 0px auto; padding: 0px; border-bottom:3px solid #E10001; height:28px; width:360px; }
#nav li { float: left; margin-left: 2px; }
#nav a { display: block; width:87px; height: 28px; line-height: 28px; text-align:center; color: #000000;
background:url(/upload/2010-06/27/nav_bg1.gif) 0 -28px no-repeat; text-decoration: none; }
#nav a:hover { color: #f00; background:url(/upload/2010-06/27/nav_bg1.gif) 0 -56px no-repeat; }
#nav a#current { background:url(/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
-->
</style>
</head>
<body>
<div id="nav">
<ul>
    <li><a id="current" href="#">首页</a></li>
    <li><a href="#">入门教程</a></li>
    <li><a href="#">视频教程</a></li>
    <li><a href="#">常见问题</a></li>
</ul>
</div>
</body>
</html>