CSS精灵图实例代码分享

最新推荐文章于 2023-07-06 20:47:07 发布

不爱喝醋的人

最新推荐文章于 2023-07-06 20:47:07 发布

阅读量643

点赞数 1

CC 4.0 BY-SA版权

文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/kiss_229/article/details/125812040

目录

前言

一、CSS精灵图是什么

二、精灵图代码实现过程

1.准备工作

2.代码实例

3.出现的问题

三、学习体会

前言

本人是初学前端html和css的小白，下面是我在学习CSS的过程中一些学习经历分享，如有出错的地方还希望多多指教，让我们一起学习一起进步

一、CSS精灵图是什么

CSS精灵图即CSS Sprites，是一种网页图片应用的处理方式，CSS精灵图又称雪碧图，它的功能你可以简单理解为就是将你要应用的背景图合并成为一张背景图，然后通过background-position的属性进行定位，通过横纵坐标的移动节选出你要用到的背景图片

二、精灵图代码实现过程

1.准备工作

那么在我们开始之前，我们就要确定好我们要做什么样的精灵图，比如导航图，按钮的背景图等等...那么下面我就以百度网页精灵图作为实例进行本次开发的实例讲解（你也可以选择去模仿其他网页的精灵图，方便快捷）

如果有着自己的想法，想去diy一张独属于自己的精灵图，下面我推荐一个网址：https://www.toptal.com/developers/css/sprite-generator/

这个是CSS精灵生成器，可以用来生成自己想要的精灵图

这是我随便找的几个哆啦A梦的图标，那么我们直接通过这个CSS精灵生成器，在上面上传我们选取好的图标或是图片，这里就会自动生成经理图，连position的位置在里面都标注好了，可以说是省去了我们很多计算的精力以及时间。

2.代码实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度热搜精灵图</title>
  <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    html {
      font-size: 14px;
      color: #333;
    }
    
    
    ul {
      list-style: none;
    }
    a {
      color: #333;
      text-decoration: none;
    }
    .container {
      width: 700px;
      margin: 50px auto;
    }
    .container ul li {
      display: inline-block;
      width: 261px;
      margin-right: 59px;
      line-height: 20px;
    }
    .container li span {
      display: inline-block;
      vertical-align: middle;
      line-height: 20px;
    }

    span.one {
      width: 50px;
      height: 60px;
      background: url(web精灵图/css_sprites.png) no-repeat -10px -75px;
    }

    span.two {
      width: 50px;
      height: 60px;
      background: url(web精灵图/css_sprites.png) no-repeat -80px 0px;
    }
    
    span.three {
      width: 50px;
      height: 60px;
      background: url(web精灵图/css_sprites.png) no-repeat -10px -8px;
    }

    span.four {
      width: 50px;
      height: 60px;
      background: url(web精灵图/css_sprites.png) no-repeat -80px -75px;
    }
  
    a:hover {
      color: red;
    }


  </style>
</head>
<body>
  <div class="container">
    <ul>
      <li>
        <a href="#">
          <span class="one"></span><span>百度</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="two"></span><span>天猫</span>
        </a>
      </li>      
      <li>
        <a href="#">
          <span class="three"></span><span>京东</span>
        </a>
      </li> 
      <li>
        <a href="#">
          <span class="four"></span><span>唯品会</span>
        </a>
      </li> 


  </div>
  
</body>
</html>

3.出现的问题

在写代码实践的过程中我也发现了我自己不少的问题：

因为还没有学到CSS的浮动定位，所以在布局方面遇到了不少的困难，总用display等属性改变标签的默认元素属性，这样就让自己陷入了混乱与不少的麻烦。

在标签属性书写等方面还不够熟练，也是自己写的少的原因，所以其中background的复合写法我的顺序出错，导致背景图片无法出现

字体内容大小，间距，图片尺寸等处理细节不够好，没有准确计算好数值，导致整个排版看起来乱七八糟的，不够整洁整齐

三、学习体会

在本次的CSS精灵图的实践中，我认为最重要的就是background-position的调试，它影响着背景图片的位置方向，CSS精灵图本身就是一个多图合并，然后通过定位寻找目标图的处理网页图片方式，所以了解清楚内置的x轴和y轴（也是就原点位置）非常重要，如何移动，当背景图片大于盒子时会怎么移动，小于盒子时会怎么移动，这都是我们值得思考的地方

本次实践作业中，我也发现自己还没有一个良好的布局观念。

这些都是我往后应该多去锻炼学习的地方

希望本次的实践分享对你的前端学习有所帮助，让我们一起进步，共同成长