所有的鸟儿他们都知道, 他们的巢应该筑在什么地方, 鸟儿知道自己该在什么地方筑巢, 那就意味着他们了解他们自己的使命。 我们身为万物之灵的人类, 怎么会不知道,连鸟儿都知道的道理呢?
初识google.cn 的类flash的 Css Sprites 效果
初识google.cn 的类flash的 Css Sprites 效果

初识google.cn 的类flash的 Css Sprites 效果

    Css Sprites,就是将页面中所有css装饰图合并成一个较大的图,然后用到特定的css装饰图的时候就利用css的background-image:大图,background-position:小图在大图中的x位置,小图在大图中的y位置
    优点:利用Css Sprites可以提升网站的性能,普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数。HTTP连接数对网站的加载性能有重要影响。

按照yahoo的 rules for high performance web sites的原则,应当较少Client与Server端间的HTTP Request次数。

通过CSS Sprites方法将多张图片组装成单独的一张图片,可以有效减少HTTP请求的次数。

鼠标没有一上去时的关键代码。
<td style="margin: 0pt; padding: 0pt 0.35em 0pt 0.4em; text-align: center; cursor: pointer;">
<a target="_blank" href="/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" style="color: rgb(68, 68, 68); text-decoration: none;">
<div>
<div style="margin: 0.5em auto; background: transparent url(/intl/zh-CN/images/toolbar_animation_20070919.png) no-repeat scroll 0pt 0px; width: 52px; height: 37px; cursor: pointer; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/>
<span style="white-space: nowrap;">
<font size="-1">视频</font>
</span>
</div>
</a>
</td>

<td style="margin: 0pt; padding: 0pt 0.35em 0pt 0.4em; text-align: center; cursor: pointer;">
<a target="_blank" href="/url?ct=pro&cd=0&source=cwh&q=http%3A%2F%2Fvideo.google.cn%2F" style="color: rgb(84, 167, 13); text-decoration: underline;">
<div><div style="margin: 0.5em auto; background: transparent url(/intl/zh-CN/images/toolbar_animation_20070919.png) no-repeat scroll -208px 5px; width: 52px; height: 37px; cursor: pointer; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"/><span style="white-space: nowrap;"><font size="-1">视频</font></span></div></a></td>

这里是直接用的background属性没有分开background-position
语法:
background : background-color || background-image || background-repeat || background-attachment || background-position
取值:
该属性是复合属性。请参阅各参数对应的属性。
默认值为:transparent none repeat scroll 0% 0%。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注