我们以为例子，图中看到的用圆圈起来的部分都是icon
这个时候你就想问了，这不就是几张图片么？
不，它不是图片，而是文字
什么？？这怎么可能是文字，文字怎么会是这样的？...
正如你所看到的，现在市面上大多数网页使用的图标都是类似这样的形式，也有不少icon图标库可供我们使用
它的实现方式有：
首先我们需要了解：
如何让页面展示一个图标呢？我们可以把图标当成文字来操作，步骤如下：
下面是具体用法范例，大家可以一试：
或者
CSS Sprites在国内很多人叫css精灵（雪碧图），是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。
加速的关键，不是降低质量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。
例子：
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚。
CSS上标：<sup>上浮内容</sup>
CSS下标：<sub>下浮内容</sub>
以下是范例:
一、电脑不能启动的原因
系统不承认硬盘
此类故障比较常见，即从硬盘无法启动，从A盘启动也无法进入C盘，使用CMOS中的自动监测功能也无法发现硬盘的存在。这种故障大都出现在连接 电缆 或IDE口端口上，硬盘本身的故障率很少，可通过重新插拔硬盘电缆或者改换IDE口及电缆等进行替换试验，可很快发现故障的所在。
如果新接上的硬盘不承认，还有一个常见的原因就是硬盘上的主从条线，如果硬盘接在IDE的主盘位置，则硬盘必须跳为主盘状，跳线错误一般无法检测到硬盘。
不知道可不可以用js,我这里有一个以前收藏起来的贴上来，看看可不可以帮助你,下面是代码（图片可以自己换换）：<style>
body{
padding: 0px
margin: 0px
font: 70% verdana, geneva, arial, helvetica, sans-serif
color: #000
text-align: center
}
#outer{
padding: 0px
margin: 0px
width: 800px
text-align: center
}
#focus{
border: #ccc 2px solid
margin: 0px
padding: 0px
padding-top: 15px
background: url(/images/tile.gif) #eee repeat-y left top
width:694px
position: relative
height: 180px
}
#description{
width:550px
height:150px
overflow:hidden
margin-right:15px
float:left
}
.dis{
float:left
width:40px
text-align: center
padding-top:50px
cursor:pointer
}
#description ul, #description li {
float:left
display: inline
margin: 0
padding: 0
height:150px
}
.view_pic a:active,
.view_pic a:visited,
.view_pic a:link {
display: inline
margin: 0
padding: 0
padding-left: 5
padding-right: 5
text-decoration: none
}
.view_pic a:hover {
color: #ffffff
display: inline
text-decoration: none
}
img {border:0px}
</STYLE>
</head>
<body>
<div id=LayerMenu style="display:none z-index: 1000filter: alpha(opacity=0)position: absoluteleft:384pxtop:69pxwidth:126pxheight:20pxborder:1px solid greenbackground:#e11padding:2pxfont-size:12px">抱歉,已经到头了!
</div>
<div id=outer>
<div id=focus>
<div class="dis">
<img id="img_l" src="back.png" alt="向左滚动" onClick="doSlide(-1)" />
</div>
<div id=description>
<div id="view_pic0" style="height:100pxwidth:1650px">
<ul id="view_pic" class=view_pic>
<li><a href="#"><img src="png-0001.png"/></a></li>
<li><a href="#"><img src="png-0002.png"/></a></li>
<li><a href="#"><img src="png-0003.png"/></a></li>
<li><a href="#"><img src="png-0004.png"/></a></li>
<li><a href="#"><img src="png-0005.png"/></a></li>
<li><a href="#"><img src="png-0006.png"/></a></li>
<li><a href="#"><img src="png-0007.png"/></a></li>
<li><a href="#"><img src="png-0008.png"/></a></li>
<li><a href="#"><img src="png-0009.png"/></a></li>
<li><a href="#"><img src="png-0010.png"/></a></li>
<li><a href="#"><img src="png-0011.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
<li><a href="#"><img src="png-0012.png"/></a></li>
</ul>
</div>
</div>
<div class="dis">
<img id="img_r" src="next.png" alt="向右滚动" onClick="doSlide(1)" />
</div>
</div>
</div>
<script>
var ok_obj=document.getElementById("view_pic").getElementsByTagName("LI")
var ok=Math.ceil(ok_obj.length/3)-1
var ele=document.getElementById("description")
var w=ele.clientWidth
var n=20,t=50
var timers=new Array(n)
var k=0doSlide(0)
function doSlide(s){
if (k>=ok &&s>0|| k<=0 &&s<0)MenuClick()
else{
k+=s
var x=ele.scrollLeft
var d=k*w-x
for(var i=0i<ni++)(
function(){
if(timers[i]) clearTimeout(timers[i])
var j=i
// alert(x)
timers[i]=setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)))},(i+1)*t)
}
)()
}}
</script>
<SCRIPT language=javascript>
var intDelay=30//设置菜单显示速度，越大越慢
var intInterval=5
function MenuClick(){
LayerMenu.filters.alpha.opacity=0
LayerMenu.style.display=""
GradientShow()
}
function GradientShow()
{
LayerMenu.filters.alpha.opacity+=intInterval
if (LayerMenu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
else setTimeout("GradientClose()",1500)
}
function GradientClose()
{
LayerMenu.filters.alpha.opacity-=intInterval
if (LayerMenu.filters.alpha.opacity>0) {
setTimeout("GradientClose()",intDelay)
}
else {
LayerMenu.style.display="none"
}
}
GradientClose()
</SCRIPT>
