这几天,几乎所有的网站都变成了灰色。
有的是修改了很多东西变灰的,有的只是在CSS里简单加了个CSS滤镜,如下所示。

body {
 filter
: Gray;
}

加了这个CSS滤镜代码,明显感觉到页面打开变慢。


我从网上找了一些CSS滤镜的介绍:

  语法:STYLE="filter:filtername(fparameter1, fparameter2...)"
  (Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)

滤镜说明:

  alpha:设置透明层次
  blur:创建高速度移动效果,即模糊效果
  chroma:制作专用颜色透明
  DropShadow:创建对象的固定影子
  FlipH:创建水平镜像图片
  FlipV:创建垂直镜像图片
  glow:加光辉在附近对象的边外
  gray:把图片灰度化
  invert:反色
  light:创建光源在对象上
  mask:创建透明掩膜在对象上
  shadow:创建偏移固定影子
  wave:波纹效果
  Xray:使对象变得像被x光照射一样


1、滤镜:Alpha
  语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
  说明:
  Opacity:起始值,取值为0~100, 0为透明,100为原图。
  FinishOpacity:目标值。
  Style:1或2或3
  StartX:任意值
  StartY:任意值
  例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、滤镜:blur
  语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
  说明:
  Add:一般为1,或0。
  Direction:角度,0~315度,步长为45度。
  Strength:效果增长的数值,一般5即可。
  例子:filter:Blur(Add="1",Direction="45",Strength="5")
3、滤镜:Chroma
  语法:STYLE="filter:Chroma(Color = color)"
  说明:color:#rrggbb格式,任意。
  例子:filter:Chroma(Color="#FFFFFF")
4、滤镜:DropShadow
  语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
  说明:Color:#rrggbb格式,任意。
  Offx:X轴偏离值。
  Offy:Y轴偏离值。
  Positive:1或0。
  例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
5、滤镜:FlipH
  语法:STYLE="filter:FlipH"
  例子:filter:FlipH
6、滤镜:FlipV
  语法:STYLE="filter:FlipV"
  例子:filter:FlipV
7、滤镜:glow
  语法:STYLE="filter:Glow(Color=color, Strength=strength)"
  说明:
  Color:发光颜色。
  Strength:强度(0-100)
  例子:filter:Glow(Color="#6699CC",Strength="5")
8、滤镜:gray
  语法:STYLE="filter:Gray"
  例子:filter:Gray
9、滤镜:invert
  语法:STYLE="filter:Invert"
  例子:filter:Invert
10、滤镜:mask
  语法:STYLE="filter:Mask(Color=color)"
  例子:filter:Mask (Color="#FFFFE0")
11、滤镜:shadow
  语法:filter:Shadow(Color=color, Direction=direction)
  说明:
  Color:#rrggbb格式。
  Direction:角度,0-315度,步长为45度。
  例子:filter:Shadow (Color="#6699CC", Direction="135")
12、滤镜:wave
  语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
  说明:
  Add:一般为1,或0。
  Freq:变形值。
  LightStrength:变形百分比。
  Phase:角度变形百分比。
  Strength:变形强度。
  例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
13、滤镜:Xray
  语法:STYLE="filter:Xray"
  例子:filter:Xray

下面是一个CSS滤镜的小例子(应该只能在IE里看到效果):

导航栏一 导航栏二 导航栏三 导航栏四 导航栏五 导航栏六

代码如下:
<html>
<head>
<title>CSS滤镜</title>
<style type="text/css">
.white 
{color:#FFFFFF; cursor:pointer;};
</style>
<script type="text/javascript"> 
// Flash table Extension for Dreamwever ,by dio(diopex@sina.com)
nereidFadeObjects = new Object();
nereidFadeTimers 
= new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
    
if (object != "[object]"){  //do this so I can take a string too
        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
        
return;
    }

    clearTimeout(nereidFadeTimers[object.sourceIndex]);
    diff 
= destOp-object.filters.alpha.opacity;
    direction 
= 1;
    
if (object.filters.alpha.opacity > destOp){
        direction 
= -1;
    }

    delta
=Math.min(direction*diff,delta);
    object.filters.alpha.opacity
+=direction*delta;
    
if (object.filters.alpha.opacity != destOp){
        nereidFadeObjects[object.sourceIndex]
=object;
        nereidFadeTimers[object.sourceIndex]
=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
    }

}


</script>
</head>
<body>

<table cellSpacing="1" cellPadding="1" style="height:30px;width:600px;text-align:center;background-color:#000033;">
<tbody>
<tr>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#00ccff;" ><span class="white">导航栏一</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff9900;" ><span class="white">导航栏二</span></td>
<td onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff3399;" ><span class="white">导航栏三</span></td>
<td  onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#33ff66;" ><span class="white">导航栏四</span></td>
<td  onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ff0000;" ><span class="white">导航栏五</span></td>
<td  onmouseover="nereidFade(this,100,10,5)" onmouseout="nereidFade(this,50,10,5)" style="FILTER: alpha(opacity=70);background-color:#ffff00;" ><span class="white">导航栏六</span></td>
</tr>
</tbody>
</table>
</body>
</html>

更多CSS滤镜的效果 http://hi.baidu.com/xieqingx/blog/item/6824b10fc322d6ecaa645701.html
===========================================
在FF下很多滤镜是不支持的,所以不建议使用CSS滤镜,这里只是说说玩玩的。
posted @ 2008-05-22 17:38 juxiaoqi 阅读(223) | 评论 (1)编辑
     摘要: 早上无聊的时候就随便玩玩。然后基于阿一的LoveIsIntheAir风格,仿百度官方空间的皮肤修改了一个CSS。修改的比较草率,有很多不足,见谅。效果图:CSS代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->/**//***************...  阅读全文
posted @ 2008-04-18 21:59 juxiaoqi 阅读(282) | 评论 (2)编辑
以前在网上看到的一个技巧,来兼容IE6 7 和Firefox之间的问题。
使用一些特速符号来兼容,看下图。

*  星号是IE系列都指出的,Firefox不支持。
_  下划线是IE6支持的,IE7和Firefox都不支持。
!important 是 IE7和Firefox支持的。以前!important是兼容IE6和Firefox最好的办法,自从IE7出来以后就不行了。

具体的用法:
先写一段css代码:
#jxq {height:300px;*height:200px;_height:100px;background-color:#ff0000;}

再写一段html代码 写一个div 调用上面的样式:
1<div id="jxq"></div>

测试一下,你就发现了~~ 
posted @ 2008-04-16 11:49 juxiaoqi 阅读(212) | 评论 (2)编辑
刚开的博客,还不知道写点什么,就胡乱写点关于SEO的想法。

SEO是什么? 很多人都知道,就是搜索引擎优化,就是针对搜索引擎的胃口优化我们自己的站点页面,让搜索引擎更多的收录站点里的页面 ,更好的提高页面的搜索结果排名。目前最主要的搜索引擎还是百度和google。他们对搜索结果的排列都是有自己各自的判断。所以才会搜索某一个关键词的 时候出现一个网站可能在百度里的位置很靠前,在google里确没有踪影。下面我简单说一些SEO的注意点。

首先,最重要的一点:你的页面是给用户看的,不是给搜索引擎看的。那些很快提高搜索结果排名的作弊行为不能叫做SEO。搜索引擎会让一个什么样的网站排在前面?当然是一个高质量的好网站。

------------------------------
以一个介绍上海招商银行店面地址的页面 http://www.tele6.com.cn/shanghai/shanghailife3_169.html 为例:

1.网站结构要好,要注意细节问题。SEO的大道理其实很简单,但细节的处理不是所有人都会注意到的。
该页面由Div+css构成,是静态html(比较而言,搜索引擎更喜欢静态html)。

2.Title标签 很重要,但不是唯一重要的,最要用一句通顺的话语高度概括页面的内容。
一看该页面的title标签 “上海招商银行营业网点一览表 - 生活便利 - 生活在上海” 就表明页面的内容

3.搜索引擎对 keywords标签 已经没有那么看重,可有可无,但千万别堆叠关键词,不用加上与页面无关的关键词。

4.页面描述 description标签 不用堆叠关键词,用一句话描述页面内容最好不过。这部分内容会被搜索当成页面的简介显示在搜索结果页面上。

5.URL上的精心处理。因为URL也是需要SEO的一部分。 一个介绍上海生活信息的网站是这样命名静态文件的。http://www.tele6.com.cn/shanghai/shanghailife3_169.html

6. <a href => </a> 的使用。链接是比较重要的。在这个页面里 http://www.tele6.com.cn/shanghai/shanghailife3_169.html  介绍的上海招商银行店面地址。所以在文章的标题上是加有本文链接的。而页面右侧的“上海最新生活信息”实际上也是在相互链接,都是对站内的SEO有一定帮 助的。

7.尽量避免用大幅图片,应多用文字说明。搜索引擎的蜘蛛是抓取文本的,所以文本对它们来讲才是有效的。像这个页面:http: //product.eastmoney.com/boduanmm.shtml 就很失败,主要的内容都是图片,虽然图片的alt属性中加入了文字说明也没有直接使用文字效果好。

8.必须使用图片的地方请加上alt属性说明。

9.请不要罗列关键词。不要将文字颜色设置成和页面背景色一样,那样有可能被搜索认为是在欺骗。

10.认真分析页面的关键词,不要使用无关的关键词,会适得其反。

11.关键词的密度不要太低,也不要太高,最好控制在3% -8%。
页面关键词密度检查:http://www.seobox.org/keyword_density.htm

12.多链接质量高的页面,抵制质量低的页面。

13.juxiaoqi建议你做一个站点的sitemap,这样更加便于搜索引擎收录。 google还专门推出了管理员管理工具,你提交一个sitemap.xml的文件,可以提交你站点的链接,效果比较好。
在线创建 Google Sitemaps 网站地图文件
中文:http://www.xinqj.com/sitemap/sitemap.asp
英文:http://www.xml-sitemaps.com/

14.多多使用模拟器去模拟搜索引擎抓取到内容,从而更加准确的做出判断。
模拟蜘蛛抓取指定网页Text,Link,Keywords及Description信息: http://www.webconfs.com/search-engine-spider-simulator.php

……

还有很多很多的细节,以后慢慢说来。SEO不是什么技术含量比较高的工作,是一种需要细心,经验累积的工作。总之SEO是正确的用心的优化页面,而不是用一些关键词的叠加等“作弊方式”欺骗搜索引擎。正确的SEO是不会被搜索引擎封杀的。

写的很乱,没有仔细整理,以后慢慢整理。

posted @ 2008-04-16 00:07 juxiaoqi 阅读(176) | 评论 (2)编辑