也谈 CSS Sprites
作者:heiniu 来源:Alimama UED 发布时间:2009-10-06 15:14:00
标签:CSS,Sprites,菜单,背景
CSS Sprites 简介:
通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,阿里巴巴各子公司的网页中到处都可发现css sprites 的影子。但CSS Sprites并不是什么金科玉律,但在很多情况下,它有着一定的优势,最重要的是它可以减轻服务器的负载,提高网页加载速度。随着Web设计向着精致、巧妙的方向发展,设计师们开始考虑使用非Javascript的方式制作鼠标滑过、悬停菜单的效果,这时CSS Sprite应运而生。
说白了,CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
当页面加载时,不是加载每个单独图片,而是一次加载整个组合图片。这是一个了不起的改进,它大大减少了HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。
CSS Sprites应用:在这方面,淘宝网做的比较好,我就以淘宝网为例吧。
[实例一:淘宝频道页面导航]
sprites图:
[实例二:淘宝首页]
sprites图:
0
投稿
猜你喜欢
- 如何向前端推送用户请求的信息?postinfo.htm<head><title>asp教程之回应用户请求信息&nbs
- SQL Server数据库的六个实用技巧:(一)挂起操作在安装Sql或sp补丁的时候系统提示之前有挂起的安装操作,要求重启,这里往往重启无用
- 代码如下:登陆时记录cookies页面代码 <!--#include file="md5.asp"--&
- 备份MySQL数据库的命令mysqldump -hhostname -uusername -ppassword
- 今天在工作中遇到了一个问题,需要按时间查询,可是查询出来的结果显示的不正确。举个例子来说,要查找出2007-10-12至2007-10-31
- PHP使用Swagger生成好看的API文档不是不可能,而是非常简单。首先本人使用Laravel框架,所以在Laravel上安装swagge
- 概述 -------------------------------------------------------------------
- 用javascript实现Base64编码—解决中文问题因javascript求出来的是Unicode要转换成Ansi后才能对它进行Base
- 网页兼容测试,除了做不同浏览器的兼容测试,还要观察网页在不同分辨率下的表现情况。在页面中使用了CSS绝对定位,发现在宽屏下错位。随后测试非1
- <title>:一个优质网页最重要的元素HTML 中的 <title> 元素用于在下列情况中提供一小段能够代表该网页
- 和大多数的语言脚本一样,学习ASP最好的方法就是亲身尝试ASP,使用你自己的系统安装PWS或者IIS。你可以边学习边在你自己的服务器上测试A
- 什么是Dynamic HTML 今天我们以问答的形式来讲述什麽是Dynamic Html。问:亲爱的网猴,我经常看到讲述有关“Dynamic
- jQuery居然都没有JSON的decode和encode,精确类型判断也没有,囧……自己动手写吧!不过这些东西在网上都已经有很好的版本了,
- 使用ajax获取服务器数据返回给客户端,出现中文乱码。在之前的一个ajax应用中指定codepage=936,将所有页面编码都指定为GB23
- 最近重新温习了一次《javascript设计模式》,确实是一本好书,每次看都有不同的领悟,每次领悟到的都受益匪浅,无怪古圣人都说学无止镜了,
- 在最近的一次调试中,出现如下错误~·错误类型:ADODB.Recordset (0x800A0E7D)连接无法用于执行此操作。在此上下文中它
- [Q]怎么样查询特殊字符,如通配符%与_ [Q]如何插入单引号到数据库表中 [Q]怎样设置事务一致性 [Q]怎么样利用光标更新数据 [Q]怎
- HTTP状态码 摘要说明成功2××  
- 不通过数据源名DSN也能访问Access数据库吗?代码如下:<% dim conn &nbs
- 在SQL查询分析器执行以下代码就可以了。01.declare @t varchar(255),@c varchar(255) 02.decl