CSS sprites简单实例
2016-01-05 23:09
645 查看
关于雪碧图(css sprites)网上已经有非常详细的介绍,比如百度百科,最简单的来说,CSS sprite即把网页中比较小的一些小图片整合到一张图片文件中,再利用CSS的
这里主要使用雪碧图实现一个最简单的小图标导航展示。具体代码可以见附件1,素材详见附件2,效果图详见附件3。
本例使用内部样式的方式对整个文档格式化处理,最核心的部分采用无序列表的方式完成对导航条目的排版。内部样式中:
这里应尤其注意到
![](http://img.blog.csdn.net/20160105223630762)
background-image属性插入图片,然后利用
background-position属性对图片所需要的部分进行精确定位,从而达到减少服务器请求次数的目的。
这里主要使用雪碧图实现一个最简单的小图标导航展示。具体代码可以见附件1,素材详见附件2,效果图详见附件3。
本例使用内部样式的方式对整个文档格式化处理,最核心的部分采用无序列表的方式完成对导航条目的排版。内部样式中:
#mainbody{}部分即对主体部分完成初试化工作,接下来清除
CSS中
ul的默认属性,然后对列表中的每一行
li完成初始化工作,其次对
h3格式进行重置,满足自身需要,使用
text-indent属性让文字缩进,以便于腾出置放图标的空间,最后便是关于
CSS sprites中最核心的部分:
[code]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
[code]<!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样式优先级
- 用CSS样式截取字符串,多的用省略号表示
- css+JS实现遮罩弹框
- QGis二次开发基础 -- 矢量图层的显示样式
- 一图让你看懂CSS盒子模型
- <hr> 的18种样式
- css3-表格
- 两种引用外部CSS文件的方法
- CSS hack大全(区分浏览器)
- css选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先
- CSS学习之实例
- css3-列表
- css3-链接
- CSS中背景颜色的渐变
- 用t4模板和head.js进行css和js的版本控制
- css reset 整理
- CSS 巧用 :before和:after
- 一般项目的CSS规范
- CSS3打造磨砂玻璃的背景
- CSS3打造磨砂玻璃的背景