一、css精灵技术
网址：http://mil.news.sina.com.cn/china/2018-08-31/doc-ihiixyeu1558608.shtml
| 示意图 |
|---|
 |
网页加载每一张图片都需要对服务器进行一次请求，所以对服务器的负荷会很大，可以将多个小图放到一张大图上，每个地方使用小图片都对大图进行背景定位即可，这样只需要加载一张大图片，对服务器只做一次请求，可以减少服务器的开销，提供网站的性能
微信案例其实就是用的精灵图
<head>
<meta charset="UTF-8">
<title>微信案例</title>
<style type="text/css">
.box{
height:74px;
background:url(img/wx_bg.jpg);
padding-left:300px;
}
ul{
list-style:none;
padding:0;
margin:0;
}
li{
float:left;
margin-top:20px;
margin-right:20px;
}
a{
display:inline-block;
text-decoration: none;
color:#fff;
height:33px;
background:url(img/wxli_bg.png) left -192px;
line-height:33px;
padding-left:17px;
}
span{
display:inline-block;
height:33px;
background:url(img/wxli_bg.png) right -192px;
line-height:33px;
padding-right:17px;
}
a:hover{
color:green;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>下载吧</span></a></li>
<li><a href="#"><span>公共平台</span></a></li>
</ul>
</div>
</body>
| 示意图 |
|---|
 |
