<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Sprites</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
<style type="text/css">
*{
margin:0;
padding:0;
font-family:sans-serif;
}
li {
font-size:32px;
color:#565656;
border-bottom: 1px solid #ccc;
line-height:120px; /*设置line-height使文字始终保持垂直居中*/
text-indent:130px;
position:relative;
}
li::before{
content:"";
width:96px; /* 此处96X100是图片的大小*/
height:100px;
background:url(sprite.png) no-repeat;
position:absolute;
top:10px;
left:12px;
}
li:nth-child(1)::before{
background-position:0 0;
}
li:nth-child(2)::before{
background-position:0 -100px;
}
li:nth-child(3)::before{
background-position:0 -200px;
}
li:nth-child(4)::before{
background-position:0 -300px;
}
</style>
</head>
<body>
<ul>
<li>Weather</li>
<li>Feature</li>
<li>Phone</li>
<li>Notebook</li>
</ul>
</body>
</html>
现在一般使用svg图片生成相应的图标，例如使用阿里巴巴的iconfont，只要将svg上传到网站即可生成相应的图标字体
283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
