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
投稿猜你喜欢
现在IE7已经推出一段时间并且渗透到用户当中，不用等太久我们就可以在页面上使用更高级的CSS。两个最有用的项目将是 Child子和Adjac- 正则表达式用于字符串处理、表单验证等场合，实用高效。现将一些常用的表达式收集于此，以备不时之需。文章转载自：http://www.phpch
- 在用python进行图像处理时，二值化是非常重要的一步，现总结了自己遇到过的6种 图像二值化的方法（当然这个绝对不是全部的二值化方法，若发现
- 不知道大家有没有一种感觉，每次当使用numpy数组的时候坐标轴总是傻傻分不清楚，然后就会十分的困惑，每次运算都需要去尝试好久才能得出想要的结
- 在CSS规范中有一个渲染对象的概念，通常用一个盒子（box, rectangle）来表示。mozilla通过一个叫frame的对象对盒子进行
- 一、lower（）：将大写字母全部转为小写字母。如：name='G'b=name.lower()二、title”"
- 万事万物都有自身存在的道理，虽然在python中有些代码我们并不常见。经常会觉得不是常用，就可以避之，但是大家好像都遗忘了一件事情，就是“真
- 一、使用PyChram的正则首先，小编讲的不是爬取ip，而是讲了解PyCharm的正则，这里讲的正则不是Python的re模块哈！而是PyC
- optim 的基本使用for do:1. 计算loss2. 清空梯度3. 反传梯度4. 更新参数optim的完整流程cifiron = nn
- 为什么是Python先来聊聊为什么做数据分析一定要用Python或R语言。编程语言这么多种，Java, PHP都很成熟，但是为什么在最近热火
- 当用GOOGLE查的时候，内容几乎都是一样的。但是你想要的东西，一个也没有。例如，我就找不到中国人写的如何使用PYTHON来创建一个XML文
- 新手小白，一直在为cmd窗口的暗白色文字感到苦恼，在网上找了许多方法（也就那两种吐舌头），现在稍微整理了一下，便于使用。效果图：import
- 需求桌面临时文件较多时，直接删了不太放心，不删又显得很杂乱，故需要写一个脚本批量清理并备份这些鸡肋的文件。所以脚本需要具有以下功能1. 可以
- 如下所示：from numpy import *import numpy as npimport matplotlib.pyplot as
- 引言膨胀与腐蚀是图像处理中两种最基本的形态学操作，膨胀将目标点融合到背景中，向外部扩展，腐蚀与膨胀意义相反，消除连通的边界，使边界向内收缩。
- 目录一、socketserver实现并发二、验证客户端合法性一、socketserver实现并发tcp协议的socket是只能和一个客户端通
- 在实际使用的时候，我们如何灵活的在存储过程中运用它们，虽然它们实现的功能基本上是一样的，可如何在一个存储过程中有时候去使用临时表而不使用表变
- 一、前言我们在使用pycharm写代码时可能出现过下面这种情况，不小心点到了ignore ....：这样会导致整个代码都没有错误提示了，类似
- 对于添加一个文件的路径我用的第一个方法就是sys.path.append()博主比较懒，就直接截图了啊对于上级文件路径和再上一级的路径可以直
- 这几天看了篇叫"Penetration: from application down to OS (Oracle)"的文
