CSS 制作雪碧图列表
2019-02-04 本文已影响125人
Devops海洋的渔夫
仅供学习，转载请注明出处
需求
在日常开发列表中会有很多的小图片，例如上图列表中的1-5小图标。如果每个小图片都分为一个小图片进行请求。这样就需要请求5次服务器。
为了减少这种性能消耗，可以考虑将这些小图标放到一个大图片中，然后使用背景图片的位置属性呈现不同的图标即可。
如果不清楚背景图片的位置属性相关知识，可以访问这里。
那么开发上面的这个雪碧图列表，需要准备什么？
需要准备图片
准备图片
好了，这里只要右键保存图片，下面就可以跟着一起来演练一下操作。
首先使用ul写出基本框架来
好了，有了基本框架下面只要将小图片逐个使用背景图片放入即可。
使用背景图片设置小图标
调整背景图片的位置，显示不同的小图标
只要调整背景图片的位置，就可以呈现不同的小图标了。
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outside{
width: 300px;
margin: 50px auto;
/*border:1px solid #000;*/
}
ul{
list-style: none;
padding: 0;
}
ul li{
width: 300px;
height: 60px;
border-bottom: 1px dotted #000;
text-indent: 60px;
line-height: 60px;
background-image: url(bg01.png);
background-repeat: no-repeat;
}
ul .li1{
background-position: left 10px;
}
ul .li2{
background-position: left -70px;
}
ul .li3{
background-position: left -153px;
}
ul .li4{
background-position: left -232px;
}
ul .li5{
background-position: left -312px;
}
</style>
</head>
<body>
<!-- div.outside>ul.munu>(li.li${美人鱼$})*5 -->
<div class="outside">
<ul class="munu">
<li class="li1">美人鱼1</li>
<li class="li2">美人鱼2</li>
<li class="li3">美人鱼3</li>
<li class="li4">美人鱼4</li>
<li class="li5">美人鱼5</li>
</ul>
</div>
</body>
</html>
2019年全套Java、Android、HTML5前端、Python、大数据视频，价值数万资源大放送
寻找资源的地址如下：
扫描微信公众号
寻找价值数万的视频资源
