Google谷歌的CSS前景图片合并技术
发布时间:2009-07-13 12:21:00
标签:css,google,图片,图标
在 Google 搜索结果页面中,将其 Logo 图标右键另存为后可以发现,它并非单纯的 Google Logo,而是一块复杂的拼合图片:
查看搜索页面源代码,其 Logo 部分代码如下:
<a id=logo href="https://img.aspxhome.com/file/UploadPic/20097/13/nav_logo4-40.png" alt=""></a>
其CSS 部分代码如下:
#logo{display:block;overflow:hidden;position:relative;width:150px;height:52px;margin:14px 0 7px}
#logo img{border:none;position:absolute;left:-0px;top:-26px}
分析上述代码可知,CSS 中 id=logo 的样式父元素采用相对定位方式,定义了宽度和高度,使用 overflow:hidden 来隐藏溢出部分;而 img 元素则采取绝对定位方式,使用 left 和 top 进行图片定位,这与背景图片的定位是一致的。
0
投稿
猜你喜欢
- 经过漫长的等待,近日,微软终于发布了Silverlight 2正式版的发布不仅让微软有了更多和Flash叫板的机会,同时也将RIA(Rich
- 说明:本文内容都是从Google上搜索来的,本想上http://www.alexa.com/查官方数据,访问非常慢暂且没查。使用本接口将返回
- <SCRIPT language="JavaScript"><!-- Beginfunction mo
- Ajax类  
- 当系统出现故障时,只要存在数据日志那么就可以利用它来恢复数据解决数据库故障。作为SQL Server数据库管理员,了解数据日志文件的作用,以
- Microsoft SQL Server 2000的会话上下文信息使应用程序得以设置二进制值,以便在同一会话或连接上运行的多个批处理、存储过
- 2009年 6月6日,空间4岁啦!与此同时Qzone月登录用户2亿,同时在线用户也突破了1000万。这是让人欢欣雀跃的数字,在空间同事眼里,
- 在软件项目实施的时候,数据导入一直是项目人员比较头疼的问题。其实,在SQL Server中集成了很多成批导入数据的方法。有些项目实施顾问头疼
- 现在有一个xml,格式如下: 代码如下:<date> <item> <id>&nbs
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 19 - TooltipsMootools 1.2
- 网上考试设计思路是怎样的?为了运行这个应用程序,我们需要在global.asa文件里进行设置数据库的连接。global.asa <&n
- 一个ASPJPEG组件综合操作的asp类CLASS相关文章:ASP怎么谈到应用到类的?ASP中类的详细介绍(class Property G
- MySQL有多种存储引擎:MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、
- 本文介绍 SQL Server 2000 企业版的新功能 - 索引视图。讲解索引视图并讨论一些提高性能的具体方案。什么是索引视图?许多年来,
- 越来越多的网站在logo中添加叶子元素,而此类logo又常常使用绿色,这可以给人希望、清新、健康的感觉,从而很容易被接受和认可。今天我们又收
- 汉字转为拼音的asp函数,原理:利用多维数组 1.添加索引 2.遍历数组Author: Unknowasp之家测试截图,呵呵不错:<%
- 1。onabort(ns3,ns4,ie4):当用户终止正在打开的网页时产生该事件。2。onblur(ns3,ns4,ie3,ie4):某元
- ADODB.Stream在ASP编程中往往用于无组件上传,并且可以指定文件编码,可以应对各种不同的需要。但是在使用ADODB.Stream过
- 第一种方法:这个是删除单字段图片的代码。比较简单,因为图片字段已经预先存在数据库表的bookpic的字段里面了。 代码如下: <!-
- 对于小数据量,xml文件在检索更新上于ACCESS有很多优势。我曾经测试过不用数据库,把网站的会员信息,商品数据信息,交易信息,网站定制信息