CSS精灵
是优化界面的一种方法：将一些小图标整合到一张图上
使用
将css代码复制到html文件的style标签中，.img就是生成的雪碧图，（注意在使用时看路径是否正确，其他不需要修改）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.img{background:url(img.png) no-repeat;}
.al08{height:32px;width:32px;background-position:0 0;}
.al05{height:32px;width:32px;background-position:-32px 0;}
.al10{height:32px;width:32px;background-position:-64px 0;}
.al09{height:32px;width:32px;background-position:-96px 0;}
.al03{height:32px;width:32px;background-position:-128px 0;}
.al02{height:32px;width:32px;background-position:-160px 0;}
.al01{height:32px;width:32px;background-position:-192px 0;}
.al04{height:32px;width:32px;background-position:-224px 0;}
.al07{height:32px;width:37px;background-position:-256px 0;}
.al06{height:32px;width:37px;background-position:-293px 0;}
div{
float: left;
margin: 10px;
width: 40px;
}
</style>
<body>
<div class="img al01"></div>
<div class="img al02"></div>
<div class="img al03"></div>
<div class="img al04"></div>
<div class="img al05"></div>
<div class="img al06"></div>
</body>
</html>
在要使用图标背景的标签中写class名： 第一个是背景图class名，第二个是你想使用的图标的class名
<div class="img al06"></div>
效果：
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
