当前标签: div+css

非背景中图片的css sprites应用,来自google05/10/2009

不常更新博客是可耻的,我常这样想。趁晚饭还没有准备完成的时候,写一下前些天注意到google的一个css sprites,页面是在google的搜索结果页面,例如在google搜索zend studio,就在这个页面,初看左上角的logo并无任何特别,当我准备将其另存为,我发现,这整张图片是这样的:

google logo

因为在背景中我是常用到或者看到css sprites,而这张图片是“前景”,看了下代码,还是很巧妙的。原理是这样的:父元素相对定位,定义宽和高,然后overflow:hidden,img用绝对定位,然后top和left来控制位置,就让多余的部分hidden了。

看代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			body{background:#ccc}
			h1{padding:0;margin:0;font-size:small;}
			a#logo{position:relative;margin:14px 0 7px;width:150px;height:52px;overflow:hidden;display:block;}
			a#logo img{position:absolute;top:-26px;left:0;border:0;}
		</style>
	</head>
	<body>
		<h1>
			<a id="logo" title="google 主页" href="http://www.google.cn/webhp?hl=zh-cn">google<img alt="" src="http://www.google.cn/images/nav_logo4.png" width=168 height=119></a>
		</h1>
		<img alt="" src="http://www.google.cn/images/nav_logo4.png" width=168 height=119>
	</body>
</html>

就是这样的“前景” css sprites,而背景的应用似乎更为简单,就是background-position了,吃饭!

| 5条评论分类: web前端编程,互联网2.0 标签:  

自己制作google桌面小工具 有趣的学习JS10/04/2008

     这是个很有意思的工作,你一边在方便了自己日常事务的同时,会略微感到惬意,因为这个使你方便的工具是你自己创造的,更不可思议的是,它是用javascript打造的,当然JS是核心,这个应用称之为“web应用”更贴切些,为了美观,我们需要用到图片(以PNG最为常见),CSS样式表来支撑这项工作,它就是google桌面小工具。
    这个小玩意儿让我看到,web应用和桌面应用的分界越来越模糊了,因为这个几乎全部是用js写的东西却的的确确的在你的桌面上运行着,像一个士兵一样负责任的为你工作着。。。。当然,出于无聊,我试着自己打造一个小小的应用,就是显示一下今天的日历,以我认为美丽的方式,在网络找了一圈,没有发现合适的,这里我想起了毛主席他老人家的谆谆教诲—“自己动手,丰衣足食”。

    GOOGLE提供了桌面小工具的开发工具包的下载,整个大小也就4M多,还包含了N多的例子教程,所以,我料想它也不会复杂到哪儿去,去google看了下这个SDK的介绍,果然是简单!
    做法我就不细说了,我倒是觉得用这玩意来学习JS,感觉乐趣平添了不少,做前面的日历,先弄几张图片,作为背景,画几个控件,分别放年月日。然后用js new Date()一个,然后分别获取当前年月日,控件innerText之,就算完成,然后打包,或者直接安装上,它就会在侧边栏上了,你就能天天看了,颇有几份成就感。

当然,这个着实简单,另外,google提供了丰富的api,让JS轻松的和系统通信,爽哉!

这种机制还真的不错,妙不可言呐。。。。。

| 9条评论分类: web前端编程 标签:  

js实现的轮换效果 图片+简介同步轮换 兼容多浏览器03/31/2008

自己写的一个javascipt实现,用于某网站的辅导员轮显,其中辅导员图片和寄语是同步的,使用innerHTML做了数据与表现的分离,这样更方便从数据库调用数据进行集中初始化。可能SEO稍微的显得不够友好,但同时本段代码也将表现的div减到最少。
没有实现淡入淡出效果,这个有时间我得补补CSS滤镜的课,呵呵,初步的效果就是这样的了
详细的演示地址:https://www.zendstudio.net/libs/js-trun-pictures/
全部的代码如下: 让我膜拜一下全文吧 »

| 3条评论分类: web前端编程 标签:  

网上铺天盖地的纯CSS实现lightbox效果的一点小改动03/21/2008

lightbox还是很好玩的东西,闲下来的时候就在网上乱翻,发现了超多叫做纯CSS Lightbox效果 的,google出来的代码完全一样(说明全是转载,到底是谁转载谁,就不得而知了),号称无JS,如果吹毛求疵的讲,控制那个层显隐的还是JS嘛!(*^_^*偶尔钻下牛角尖)不过还是蛮实用的,除了用js做出的渐显和渐隐,效果几乎是一样的啦!在IE下运行的时候,因为会在右边出现空白边,所以我加了一句body{margin:0}来解决这个问题。好吧,人云亦云一回,以下是那个铺天盖地的代码,我做了一点点改动. 太给力了,让我看完 »

| 10条评论分类: web前端编程 标签:  

IE的绝对定位缺陷及修复方案03/03/2008

这个问题出现在一个网站页面的布局上,因为左侧的背景阴影与其顶部的flash对接时,使用传统的float总是无法完美实现,要么歪了一点,要么出现一条缝隙,于是我决定用绝对定位(position:absolute)来解决它,问题就出现了:当我将左侧边栏绝对定位,理论上应该是位于父容器的左侧,可是在IE下预览的时候,它似乎跑到了中间,以下是重现问题的代码: 太给力了,让我看完 »

| 2条评论分类: web前端编程 标签:  

CSS hack几个新的标识符 – 区分IE7、IE6、FF和Opera01/09/2008

1、!ie
  IE7修复了!important这个区分IE、FF等很爽的hack,现在只能用它对付IE6及以前的版本了。同时,人们也发现了IE7的BUG,就是这个 !ie,其适用于(这里的“适用于”是“……能够认识”的意思,下同)IE7及以前版本,也就是说,这个!ie能区分目前的IE和其他浏览器,不敢保证未来的IE版本是否修复此BUG,当然这样的代码将不符合CSS语法规则。看例子:
[codes=html]
<html>
  <head>
    <title>测试页面</title>
    <style type="text/css">
      p
      {
        background: red;
        background: green!ie;
      }
    </style>
  </head>
  <body>
    <p>难道你家的馒头是圆的?(注意IE和FF下背景的不同)</p>
  </body>
</html>
[/codes]
让我膜拜一下全文吧 »

| 3条评论分类: web前端编程 标签:  

绝对定位的div层,别再让flash盖住了11/22/2007

今天一个图片滚动的案子,说是想点击放大了看,偶就用我博客的那个图片插件——highslide来整,这个JS的东西效果很好!
很顺利的移植上去,可是有一个flash的广告老把放大后的照片给遮住,后来在网上一搜,只要加一个参数就OK了。

后来了解了下wmode的具体意思

wmode 属性/参数

值: Window | Opaque | Transparent
模板变量:$WM
说明: (可选)使您可以使用 Internet Explorer 4.0 中的透明 Flash 内容、绝对定位和分层显示的功能。此标记/属性仅在带有 Flash Player ActiveX 控件的 Windows 中有效。

“Window”在 Web 页上用影片自己的矩形窗口来播放应用程序。“Window”表明 Flash 应用程序与 HTML 层没有任何交互,并且始终位于最顶层。

“Opaque” 使应用程序隐藏页面上位于它后面的所有内容。

“Transparent”使 HTML 页的背景可以透过应用程序的所有透明部分进行显示,这样可能会降低动画性能。

“Opaque windowless” 和“Transparent windowless” 都可与 HTML 层交互,并允许 SWF 文件上方的层遮蔽应用程序。这两种选项之间的差异在于 “Transparent”允许透明,因此,如果 SWF 文件的某一部分是透明的,则 SWF 文件下方的 HTML 层可以透过该部分显示出来。
如果忽略此属性,默认值为 Window。仅适用于 object。

文中说的很清楚了,就是默认的window值不允许自己的上方有层遮蔽~终于明白了

| 2条评论分类: web前端编程 标签:  

CSS修复IE6下不认position:fixed的问题11/14/2007

    帮一个同事整她的博客,其模板在IE7和FF下浏览都是正常的,但是在IE6下变的异常糟糕!偶细细查找了一回,确定问题出在position:fixed上,IE6根本不认识固定定位的。于是打算修复,在网上狂搜了一通,忽略JS的代码,因为同事的blog是blogbus的,没有找到地方可以插入JS代码!
     因为IE6不认fixed,只好将其position:absolute来绝对定位,然后将原来的滚动条隐藏,利用body产生一个新的滚动条,再加上ie6对100%的特殊理解,我们的hack利用就出来了,OK,看代码: 让我膜拜一下全文吧 »

| 2条评论分类: web前端编程 标签:  

DIV+CSS经典——双语导航菜单 无JS代码11/02/2007

这个菜单的巧妙之处在于对a:hover伪类的淋漓尽致的应用(用<span>隐藏杀机),所以不用JS代码,也能实现这种很炫的效果。
怎么看怎么有点像flash的效果呀?呵呵,不多说了,看代码吧!(代码首页显示不下,只好就此截断了,请多包涵。 ^_^) 竟有如此美文,尽阅之 »

| 2条评论分类: web前端编程 标签:  

接触伟大的jquery -优雅的JS库09/13/2007

     这个jquery应该属于客户端编程的范畴吧,可是做一个程序员,你要搞时下流行的AJAX,不搞点客户端编程是说不过去的,就拿简单的表单数据验证吧,总得弄个JS代码不是。发现了这个jquery框架。

jQuery是一个了不起的javascript库,它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站的方面说,这使得javascript更加有趣。

      嗯!也看了它实现AJAX的优雅与简约,我想是离不开它了!~

     呵呵,主要很有几天没有更新博客,写点东西上来凑数也好吧。关于那个宣传自己的材料,写起来还真TM有难度,毕业逾两载,根本没啥成就可以写!写上学时候的吧?那又都是些乱七八糟的往事,不知道咋办了。“先生还是写一点吧”,冥冥中有人如此推心置腹的好生相劝,我感动的有点想哭,这个本来也是一个机会的,看能不能把握住了。

| 发表评论分类: web前端编程 标签:  

PHP界大牛们
反人类不分昼夜
牛掰级朋友圈子