CSS 制作雪碧图列表

作者: Devops海洋的渔夫 | 来源:发表于2019-02-04 09:27 被阅读125次

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

需求

在日常开发列表中会有很多的小图片，例如上图列表中的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>