四时宝库

程序员的知识宝库

「前端架构师详解Css17」案例“类天猫左侧导航栏”及css雪碧图

友情提示:以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码,现在免费分享给大家,获取的方式为:

关注此头条号“互联网IT信息”——>私信发送 “天猫css” ,(注意:css全是小写)即可得到源代码的获取方式。

1. 此篇文章讲解目录:

  • 案例和由此案例重点讲解的知识点介绍

  • 案例代码实现

  • css雪碧图知识点详解

2. 案例和相关知识点介绍

此案例是页面,效果如下:

此页面的技术实现解析:

使用https://www.toptal.com/developers/css/sprite-generator可以在线将所有图标生成成雪碧图,直接使用

此案例中主要用到了,基于此,我们会系统的将如下知识点全部讲解:

css雪碧图(又叫精灵图)

3. 此案例的代码实现

第一步:编写左侧html代码,使用无序列表完成

第二步:编写通用css样式

第三步:编写无序列表的相关样式

第四步:使用生成好的雪碧图样式,并通过icon对雪碧图的大小位置进行额外设置,这里我们通过zoom属性,来控制实际显示大小

4. 此案例的知识点详解

精灵图概念简述:

简单地说,CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图

工作原理:

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)。然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。

精灵图的制作注意事项:

1:制作精灵图,小背景图片之间必须有间隙

2:保存精灵图要保存为拼合png格式

代码实例:

div{

width: 80px;

height: 30px;

background: url(img/3.png) -78px -50px ;

}

p{

width: 60px;

height: 20px;

background:url(img/3.png) -5px -102px;

}

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接