昨天在diglog上看到有文章介绍“史上最强 真正的反谷歌网站！！！”。初看十分惊讶，以为全用图片完成的，再看不是图片，是文字，甚至连地图结果都能翻过来，推测非人力之所为。
今天想起来，发现在FF里这个网站不“反”了，想到CSS的兼容性，看了一下这个网站的HTML代码，再查了CSS手册，戏法揭穿。

我也如法炮制，做了一个“反谷歌”和“反百度”页面，大家来欣赏吧。

语法：
filter :progid:DXImageTransform.Microsoft.BasicImage (mirror=bMirror)
属性：
mirror :可选项。布尔值(Boolean)。设置或检索是否反转显示对象内容。0 | 1
1 : 反转显示对象内容。
0 : 默认值。正常显示对象内容。

兼容性：IE5.5+（firefox不支持）

在蓝色带链接的文字里为了突出某个词，需要使用红色显示，同时要求这个词的下划线也是红色的。

以前的实现方法：


看今年高考作文题之偏，叹当今莘莘学子之苦

现在流行样式和内容分离嘛，要抛弃font标签。所以重新写了一下：


看今年高考作文题之偏，叹当今莘莘学子之苦

这样出来后，红字的下划线是蓝色的…
一时之间没有想出原因，去CSSER求助，得到BC的指点。
underline的颜色是跟color一样的，keywod的下划线继承了上一级color的颜色。
现在给keyword增加下划线的定义，keykord的下划线就跟随自身color的颜色。


看今年高考作文题之偏，叹当今莘莘学子之苦

原文地址：http://www.w3cn.org/article/translate/2005/111.html

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和 keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：

name 属性

1、用以说明生成工具（如Microsoft FrontPage 4.0）等；

2、向搜索引擎说明你的网页的关键词；

3、告诉搜索引擎你的站点的主要内容；

4、告诉搜索引擎你的站点的制作的作者；

5、

其中的属性说明如下：

设定为all：文件将被检索，且页面上的链接可以被查询；

设定为none：文件将不被检索，且页面上的链接不可以被查询；

设定为index：文件将被检索；

设定为follow：页面上的链接可以被查询；

设定为noindex：文件将不被检索，但页面上的链接可以被查询；

设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv属性

1、

和 用以说明主页制作所使用的文字以及语言；

又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；

2、定时让网页在指定的时间n内，跳转到页面http://yourlink；

3、可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；

4、是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；

5、cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式；

6、网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的；

7、强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；

8、和设定进入和离开页面时的特殊效果，这个功能即 FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。

这儿有一个自动生成META TAGs 的链接，有兴趣的话可以试试：meta tags 自动制作

作者：阿捷 2005-4-8 15:28:00
转自：网页设计师

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)
边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)
背景的属性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

语法是background:color image repeat attachment position;

你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：

color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%
字体(fonts)
字体的属性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:”Lucida Grande”,sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);