教你如何简单快速掌握精灵图的使用技巧

最新推荐文章于 2024-08-03 09:05:49 发布

昨夜秋风拂

最新推荐文章于 2024-08-03 09:05:49 发布

阅读量400

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/L20220927Y/article/details/127627455

版权

一、概述

虽然说精灵图在市面上使用的公司已经很少了，但还是没有完全落伍，还是有部分公司依旧使用着这种方式，如王者荣耀的网站界面还有12306的官网。

早期精灵图因只需要加载一张图片省略了不少网站加载的时间所备受追捧，因为把所有的小图标全部放在一张图上，通过挪移不同的图片位置，从而获得不同部分的显示，最终把每块区域显示不同图标的效果实现，这种方法在当时显得很简单快捷，但是后期图标字体的出现让图标的设计使用游乐更多的方法，所以精灵图的使用开始下滑。

虽然如此，这依旧是一个值得我们掌握的技巧，那么下面我给大家仔细讲解一下。

二、精灵图演示

1.展示

这两个都是目前市面上在使用精灵图的

2.代码撰写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
      *{
        margin: 0px;
        padding: 0px;
        list-style: none;
        text-decoration: none;
      }
      ul{
        margin: 100px 200px;
      }
      li>div{
        width: 50px;
        height: 50px;
        overflow: hidden;
      }
      img{
        width: 50px;   
      }
      li{
        float: left;
        margin-left: 80px;  
      }
      p{
        margin-left: -10px;
        color: black;
      }
      .one{
        margin-top: -50px;
      }
      .two{
        margin-top: -275px;
      }
      .three{
        margin-top: -165px;
      }
      .four{
        margin-top: -220px;
      }
      .five{
        margin-top: -110px;
      }
      .six{
        margin-top: -330px;
      }
      .seven{
        margin-top: -450px;
      }
    </style>
</head>
<body>
    <a href="">
  <ul>
    <li><div><img class="one" src="./12306.png" alt=""></div><p>重点旅客预约</p> </li>
    <li><div><img class="two" src="./12306.png" alt=""></div><p>遗失物品查找</p> </li>
    <li><div><img class="three" src="./12306.png" alt=""></div><p>约车服务</p> </li>
    <li><div><img class="four" src="./12306.png" alt=""></div><p>便民托运</p> </li>
    <li><div><img class="five" src="./12306.png" alt=""></div><p>车站引导</p> </li>
    <li><div><img class="six" src="./12306.png" alt=""></div><p>战车风采</p> </li>
    <li><div><img class="seven" src="./12306.png" alt=""></div><p>用户反馈</p> </li>
  </ul>
</a>
</body>
</html>