CSS sprites简单实例

关于雪碧图(css sprites)网上已经有非常详细的介绍，比如百度百科，最简单的来说，CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image属性插入图片，然后利用background-position属性对图片所需要的部分进行精确定位，从而达到减少服务器请求次数的目的。

这里主要使用雪碧图实现一个最简单的小图标导航展示。具体代码可以见附件1，素材详见附件2，效果图详见附件3。

本例使用内部样式的方式对整个文档格式化处理，最核心的部分采用无序列表的方式完成对导航条目的排版。内部样式中:#mainbody{}部分即对主体部分完成初试化工作，接下来清除CSS中ul的默认属性，然后对列表中的每一行li完成初始化工作，其次对h3格式进行重置，满足自身需要，使用text-indent属性让文字缩进，以便于腾出置放图标的空间，最后便是关于CSS sprites中最核心的部分：

background: url(00.png) no-repeat;.sp-1 i{background-position: 0px 0px;}
.sp-2 i{background-position: -26px 0px;}
.sp-3 i{background-position: -26px -27px;}
.sp-4 i{background-position: 0px -27px;}

这里应尤其注意到background-position属性中坐标的方向问题，CSS中规定图片的左上方为原点(0px 0px)，向左为水平正方向，向上为竖直正方向，而且在写坐标时应特别注意不要忘记单位px

附件1

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/htm"; charset="utf-8" /><title>CSS Sprites</title><style type="text/css">*{margin: 0px; padding: 0px;}#mainbody{position: relative;width: 100px;height: 150px;border: solid 2px #fff;padding: 2px;}ul{list-style: none;}li{display: block;height: 25px;line-height: 25px;overflow: hidden;margin: 5px;border-bottom: 3px solid #dedede}h3{font-weight: 100;font-size: 14px;text-indent: 10px;}li i{background: url(00.png) no-repeat;display: inline;width: 25px;height: 25px;float: left;}.sp-1 i{background-position: 0px 0px;}.sp-2 i{background-position: -26px 0px;}.sp-3 i{background-position: -26px -27px;}.sp-4 i{background-position: 0px -27px;}</style>
</head>
<body>
<div id="mainbody"><ul><li class="sp-1"><i></i>         <h3>主页</h3></li><li class="sp-2"><i></i>         <h3>空间</h3></li><li class="sp-3"><i></i>         <h3>网络</h3></li><li class="sp-4"><i></i>         <h3>其他</h3></li></ul>
</div>
</body>
</html>

附件2

素材：

附件3

效果图：

CSS sprites简单实例相关推荐

HTML+CSS简单实例（一）
HTML+CSS简单实例(一) 本实例参考https://blog.csdn.net/u010871058/article/details/78511848 目的:实现简单欧莱雅网站. 代码内容: & ...
css 在线生成器,CSS Sprites在线生成器
一款优秀的主题,不仅仅需要美观的设计,还需要最大的各项优化,最大可能地优化主题中用到的图片,也就变得十分重要,使用CSS Sprites技术是比较常见的手段,很多优秀的主题都很注重这一点.跟版模板网在 ...
css中图片整合的使用,CSS Sprites:图片整合技术详细案例
CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度.介绍了CSS Sprites技术的实现方法,优点和缺点.最后通过实例CSS Sprites技术制作导航栏演 ...
使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...
js中的json ajax,js结合json实现ajax简单实例
这篇文章主要为大家详细介绍了js结合json实现ajax简单实例的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下前期准备 1.安装wampserver或者其他相似软件来搭建本地集成安装环 ...
html css精灵,谈谈CSS Sprites(css精灵)
CSS Sprites在国内很多人叫css精灵,其实这个技术不新鲜,这个技术老到什么程度呢,我不敢确定,但是我看到最早的关于CSS Sprites是在Dave Shea的<CSS Sprites ...
“约见”面试官系列之常见面试题之第五十一篇之CSS Sprites（建议收藏）
CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...
html背景图不显示_批量显示多张有序排列的图标，使用精灵图CSS Sprites这种办法...
让你显示一个天气图标你会怎么显示呢?让你做一个简单的动图你会怎么采用什么方式呢?让你输出一个长期固定的图标列表你会怎么编写代码呢? 如果不管性能,不用css,不用js,可能你会这么写html: < ...
【JEECG技术博文】简单实例讲解JEECG ONLINE表单权限控制（jeecg3.6）
简单实例讲解JEECG ONLINE表单权限控制(jeecg3.6) 原文:http://blog.itpub.net/30066956/viewspace-1872409/ 相关博文: ...

CSS sprites简单实例

附件1

附件2

附件3

CSS sprites简单实例相关推荐

最新文章

热门文章