CSS的另类拼图___减少HTTP请求
作者：zishu 来源：zishu博客 发布时间：2009-05-28 19:05:00
标签：http,性能,css,拼图
减少HTTP请求，是可以提高网站速度的，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分，这是很多网站一直的作法。但是这些应用大多是应用于元素的背景中，很少有人把LOGO放在这里边，就是放了也比较难显示出来。今天看了GOOGLE的的作法，恍然大悟，他真的很聪明。
他的代码写的比较多，我简化了一下，自已写了一个实验版本，供参考：
首先，我把一个网页中所有的图片都放在了一个图片中，如下图，注意，LOGO也在里边；
CSS部分的代码为：
<style>
#logo{ width:154px; height:61px; overflow:hidden; float:left}
#logo img{ margin-top:-317px; border:none;}
GOOGLE是用的相对定位再用绝对定位弄的，我感觉那种作法有些麻烦，而且在复杂布局是会引出更多新的问题，所以我用的是margin，这样不会影响到其它地方的布局。我也推荐大家这样用。
布局部分：
<div id="logo"><a href="http://www.zishu.cn">
<img src="https://img.aspxhome.com/file/UploadPic/20095/28/w200952123340-79.gif" alt="zishu" /></a></div>
再看一个完整的例子，这是LOGO加背景的一种写法：
0
投稿猜你喜欢
根据我最近的一些实践以及在和一些读者进行关于HTML表格的使用问题沟通之后，决定写这篇文章。总的来说，我注意到由于误导性信息，他们对于tab- 在DreamWeaver中编写CSS,这种编写习惯本站(twocity.cn)并不提倡,不过由于"可视化"和操作简便,使
- access中可以将文本中的数据轻松导入表中，mysql中用起来没那么方便，其实起来也很简单。首先将数据记录按行处理好用特定的字符分开如：“
- Oracle客户端NLS_LANG设置 OracleWindowsMicrosoftUnixBash 1. NLS_LANG 参数组成 NL
- 备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如”用户名”+输入框, 这里的”用户名”
- 现在正在搞三层开发，用ASP和VB6.0，但是现在苦于没有找到合适的方法来调试自己写的DLL文件，效率相当低。 &n
- 摘要：现代网站和web应用程序趋向于依赖客户端的大量的javascript来提供丰富的交互。特别是通过不刷新页面的异步请求来返回数据或从服务
- 利用系统crontab来定时执行备份文件，按日期对备份结果进行保存，达到备份的目的。1、创建保存备份文件的路径/mysqldata#mkdi
- 1、灵活运用样式 熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，
- 前言HTML 5如同一场革命，正在Web2.0后时代轰轰烈烈的进行着。HTML 5是什么，无须我在这里赘述了。对于HTML 5的革新，按我的
- MacJi “偷懒”翻译了部分，下午冒着被 BOSS 开除的危险将其补完（原文链接）。使用 line-height 垂直居中line-hei
- 阅读上一篇：javascript面向对象编程（一）[javascript模拟传统OOP]javascript是一种非常灵活的语言，它的灵活度
- 最近接触到Tencent的广告越来越多，户外广告牌和电视上都是，可以明显感觉到Tencent的扩张野心，以及对QQ品牌定位的重塑。摆脱低龄化
- PHP+MySQL的组合是构建网站的一个常见搭配，不过如何使用PHP通过Web访问MySQL数据库呢?下面从Web数据库架构的工作原理讲起。
- 以下为SQL SERVER7.0以上版本的字段类型说明。SQL SERVER6.5的字段类型说明请参考SQL SERVER提供的说明。bit
- 一、IE透明度问题在IE的高度超过某一阀值时，会产生透明度不时失效的问题，这现象比较奇怪，（会有的时候全黑，有的时候全白）你有可能无法复现。
- 设法让用户happy吧～只要你的设计让用户乐了，产品的个性就得到了一次彰显，而用户对网站的情感就会获得一次升华，看看下面的知名网站的人性化设
- 三、支持XML的公司和它们的开发工具 尽管XML还处在开发阶段，其标准正在由W3C组织制定，但是已经有许多公司表示全力支持XML，并开发了不
- <％''调用例子'Dim int_RPP,int_Start,int_showNumberLink
- 以下的文章主要介绍的是MySQL 查询缓存的实际应用代码以及查看MySQL 查询缓存的大小 ，碎片整理，清除缓存以及监视MySQL 查询缓存
