0
点赞
收藏
分享

微信扫一扫

CSS 制作雪碧图列表


仅供学习,转载请注明出处

需求





CSS 制作雪碧图列表_小图标


在日常开发列表中会有很多的小图片,例如上图列表中的1-5小图标。如果每个小图片都分为一个小图片进行请求。这样就需要请求5次服务器。

为了减少这种性能消耗,可以考虑将这些小图标放到一个大图片中,然后使用背景图片的位置属性呈现不同的图标即可。

如果不清楚背景图片的位置属性相关知识,可以访问​​这里​​。

那么开发上面的这个雪碧图列表,需要准备什么?

需要准备图片




CSS 制作雪碧图列表_ide_02


准备图片


好了,这里只要右键保存图片,下面就可以跟着一起来演练一下操作。

首先使用ul写出基本框架来




CSS 制作雪碧图列表_背景图片_03


好了,有了基本框架下面只要将小图片逐个使用背景图片放入即可。

使用背景图片设置小图标




CSS 制作雪碧图列表_ide_04


调整背景图片的位置,显示不同的小图标




CSS 制作雪碧图列表_ide_05


只要调整背景图片的位置,就可以呈现不同的小图标了。

完整代码如下

<!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>

 微信公众号

CSS 制作雪碧图列表_小图标_06

举报

相关推荐

0 条评论