专栏首页Devops专栏CSS 制作雪碧图列表

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery 事件委托 - delegate()

    事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也...

    Devops海洋的渔夫
  • JavaScript 使用getElementsByTagName获取元素

    可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签,获取的是一个选择集,不是数组,但是可以用下标的方式操作...

    Devops海洋的渔夫
  • jquery链式调用 - 层级菜单示例

    jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:

    Devops海洋的渔夫
  • 从零开始学 Web 之 CSS(五)可见性、内容移除、精灵图、属性选择器、滑动门

    将元素高度设置为0, 使用内边距将盒子撑开,给盒子使用overflow:hidden; 将文字隐藏。

    Daotin
  • CSS3中transition、transform傻傻分不清楚

    css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~ 下面列举几个最容易混淆的属...

    Javanx
  • 掌握好这几个css属性,少写100行js代码

    比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性

    小明爱学习
  • 掌握好这几个css属性,少写100行js代码

    比如上述代码,把main元素的高度就设置为当前窗口的高度减去200px,字体大小也可用于此函数实现自适应字体;这个函数可用于所有css长度的属性

    小明爱学习
  • 制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿

        前几日在利用JQuery做菜单滑动标记这个效果的时候,最后发现滑动条在我用鼠标快速滑动的时候,会出现滑动条延迟滑动,并且有卡顿的现象,相当影响体验感受。...

    八哥
  • CSS 3.0中伪元素after和before的妙用

    我们常用CSS 3.0中的伪元素来修饰一些细节,让页面看起来效果更好,比如下面这个图片中的面包屑导航中的符号,还有任务清单前的序列符号,都是用伪元素实现的。

    越陌度阡
  • 符合标准的有序列表分页源码示例

    一个符合标准的有序列表分页源码示例。 你可以根据你所应用的不同程序语言,打包生成一个符合标准的分页控件。 DOM结构: <ul class="paginatio...

    练小习

扫码关注云+社区

领取腾讯云代金券