大家好，小网站导航源码分享相信很多的网友都不是很明白，包括网址导航源码开源也是一样，不过没有关系，接下来就来为大家分享关于小网站导航源码分享和网址导航源码开源的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！
友情提示：以下代码是我们邀请的前端架构师基于天猫门户编写的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;
}
好了，关于小网站导航源码分享和网址导航源码开源的问题到这里结束啦，希望可以解决您的问题哈！