腾讯云·社区
CSS 制作雪碧图列表
需求
在日常开发列表中会有很多的小图片，例如上图列表中的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>本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句