今天我带给大家的是方法另辟其境：CSS。总所周知，CSS 是一种层样式表，只是为了网站界面的展现做出重要贡献的角色。那么它怎么实现防御 SPAM 的呢？ok，接着下看。

原理
为了不上了就代码让大家感到迷惑，先讲一下原理：首先在创建表单的时候，添加一个对 SPAM 校验的 input 标签，然后再提交的时候进行对这个标签进行判断其值是否为空，因判断是否为 SPAM（如果你不明白 SPAM 的实现原理请看这里）。（看官：不就是设置成 hidden 类型吗，这谁都知道）错！我承认这是一个最常见的判断 SPAM 的流程，但这里添加的 input 类型使用的是 text 类型，这是为了防止 SPAM 在进行抓取页面进行对 input 类型判断是否有 hidden 类型为设置的，那么怎么隐藏这个 input 标签呢？那么就可以利用到 CSS 的 display 属性，哈哈，是不是明白了？好吧，看代码吧。

代码
HTML 代码：

	Name: 

	Email: 

	Comment: 

CSS 代码：

body {
	line-height:35px;
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
	font-size:14px;
}

.special {
	display:none;
}

上述代码中 class 为 special 的 input 标签即为判断 SPAM 的标志。使用 CSS 对其隐藏，就在提交表单后进行对这个 input 进行判断是否为空即可。这样就简单避免 SPAM 对 input 的 hidden 判断的避免而轻松达到防御的目的。

声明
CSS 防御 SPAM 的实现方法来自Modernblue 网站发布的文章。本人只是做翻译工作，特此声明。

为什么称之为“The Woork Handbook”，首先因为此书的内容均来自 Woork 的 blog 之中的文章（涵盖了 2008 年 1 月到 12 月的一些文章）。目前此书发布的是第一个预览版本：0.1

电子书下载：The Woork Handbook

此人博客的内容涵盖了广阔的互联网开发领域，就像上面此书介绍的那样，不过有时候偶尔会无法访问，可恶的 GFW，另外这里在说明想一下作者最后的声明：

• 英语并不是作者的母语
• 文章所有内容都是 复制粘贴 自作者的博客
• 当有新的内容，作者会周期性更新此书内容

Devunity 是一个极具创意性的在线编程服务网站，使用它就像是在使用系统的文本编辑器一样，支php，Python，Javascript，Perl，Html，Asp，Css，Ruby语言语法高亮，行数显示，支持 Tags。最大的特性还属创建项目，从SVN服务导入代码，支持多种服务的API（如 Twitter，Flickr，BOSS，Google Apps Engine,，Digg，Facebook等等）接口编程到团队协作，添加 Todos。

Devunity 是TechCrunch 最新评出来的 TC50 之一。目前这个服务还属于开发当作，之前只是申请才能获得邀请，过了一个10.1终于给了邀请，碰巧通过内测用户邀请是可以直接申请到用户，所以，如果你想尝试一下，留下你的 Email 地址吧:)

在 Web 开发当作不可免的要碰到表单的输入框，那么当我们在获取一个输入框并输入必要的东西时，怎么样才能让使用者更清楚的知道当前输入的是哪个输入框？ 这就要使用到输入框高亮。目前使用效果最多的有两种，一种是如上图那么整个当前的背景全部高亮；另外一种是仅把当前输入框的边框高亮。原理也很简单，就是当输入框获得和失去焦点是触发事件。

实现方法也有几种：
1. 最简单的方法就是在输入框加入 onfocus 和 onblur 事件并设置执行方法，比如：

优点：除了直接外我不知道说什么
缺点：一个输入框对应一个，多了话就麻烦了，不建议使用。

2. 使用 jQuery 或去他 JavaScript 框架
这里以 jQuery 为例：

$(document).ready(function(){
        //获得焦点
	$("input").focus(function() {
                // 添加 Class
		$(this).parent().addClass("curFocus");
	});

       //失去焦点
       $("input").blur(function() {
                //删除 Class
		$(this).parent().removeClass("curFocus")
	});
});

这里只是把核心代码贴了出来，这里推荐看：Improved Current Field Highlighting in Forms。里面写的清清楚楚。

3. 纯 CSS 打造
不想或者不会使用 JavaScriot？没有关系，仅 CSS 也可以做出这样的效果哦，不信？好，接着看：我们在写 CSS 的时候会经常使用到几个伪类，尤其是用在链接（a）上面，比如 a:hover, a:visited 等等，另外还有一个伪类就是 :focus，对，没错，获得焦点。
另外在定义输入框需要定义 input ，但是 input 的范围太广，包括了 button, text, password等等的元素。这里需要使用 type 指定某一元素，比如 定义 text ，就是使用：

input[type=text]{}

那么好了，使用 CSS 高亮的方法出来了：

            #example input[type=text], #example textarea {
                margin: 5px 5px 5px 0;
                width: 194px;
            }

            #example input[type=text]:focus, #example textarea:focus {
                border: #e6e2af solid;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                border-radius: 5px;
                border-width: 5px 5px 5px 155px;
                left: -153px;
                margin: 2px 2px 2px 0;
                position: relative;
                z-index: 0;
            }

这里还有一个演示，大家直接看源代码吧：使用 CSS 高亮输入框

这是我目前收集并了解到的实现方法，希望对大家有多帮助

TYPECHART lets you flip through, preview and compare web typography while retrieving the CSS

支持 Windows 和 Mac 环境的样式输出，点击 “Get CSS”，就会显示 指定字体样式的 CSS 代码。这些方便了我。哈哈 o(∩_∩)o…

众所周知，Firefox浏览器外加Firebug插件是互联网开发的最佳平台和调试工具。与此同时，Firebug最人性化的地方还是可以再做插件扩展，下面将介绍的是WebMonkey推荐的5款最棒的Firebug扩展。（安装下面插件的之前必须先安装Firebug插件）

1. YSlow

YSlow（why slow）是由Yahoo开发者团队发布的一款基于Firebug的插件，插件遵循雅虎10条网站开发的军规评测网页效率。这里推荐一篇文章《如何提高网页的效率（下篇）——Use YSlow to know why your web Slow》。

2. Firecookie

Firecookie可以随时查看当前网页的所有变化的Cookies信息，同时还可以从firebug的面板设置是否接受或拒绝cookies信息，同时配合Firefox3的页面信息功能使用效果尤佳。Web Developer插件也有类似的功能。

3. FirePHP

FirePHP的PHP调试信息都是通过在HTTP头里面添加“X-FirePHP-Data”信息串来标识，不会直接输出到页面上，这样也就避免对php正常输出产生影响。不过调试的时候需要加载一个FirePHP的库文件。如何使用大家可以参加这篇文章：《Debugging PHP with Firebug and FirePHP》这个也是我今天才找到的，里面的英文不是很难懂。

4. Pixel Perfect

Pixel Perfect是专门为做设计的朋友准备，经过我的测试明白了它的用途，它可以添加图片到当前的页面上面，同时可以调整图片的透明度和位置，以方便调试网站的设计，我想光凭我说还是很难明白，大家看下官方的视频演示吧。

5. Rainbow

Rainbow是一款使得JavaScript语法高亮的插件，因此此插件被命名为彩虹（Rainbow），默认的Javascript变量是绿色，保留字是蓝色，当然如果你不喜欢，你还可以随时更改，通过官方的颜色库可以改变，不过目前只有4种配色。

如果你对Firebug的插件有兴趣的话，可以参见Jan Odvarko列出来的Friebug的插件清单。当然，您也可以自己编写FIrebug插件。

body{
background-image: url(http://www.icyleaf.cn/logo.jpg);
}
/* 也可以直接使用background 代替 */
body{
background: url(http://www.icyleaf.cn/logo.jpg);
}

这都是可以的，所以说css的自由度很高，这点我很喜欢。其实css显示图片分3种，第一种是单纯的显示一个图片；第二种称之为CSS Sprites，也就是说把若干小图片合成一个大图片，然后通过background的postion参数实现效果，第三种就是我们今天说的另类用法，它也有学名称之为Inline images。实现声明一点，这个方法不适用于IE浏览器，恩，没错，IE，我们都遗弃你了。（关于CSS Sprites 的描述信息来自7career.org）

CSS Sprites是一种把所有的图片都以base64编码以源代码的形式写在CSS文件里，格式是这样的：data:[<mediatype>][;base64],<data>

data:URL标签是在1995年第一次提出，按RFC2397规范的描述：它是”allows inclusion of small data items as ‘immediate’ data.（允许在页面中包含一些小的即时数据）”。如一个内嵌的的图片可以这样引用：

body{
background-image:url(data:image/gif;base64,R0lGODlhCAAIAJEAAOnp6eTk5O7m8AAAACH5BAEAAAIALAAAAAAIAAgAAAINjAMJh2q6DnxOVsqmLQA7);
}

这段代码可以在firefox浏览器运行，恩，图片是我取自mg12当前模板的背景图，呵呵(^___^)

base64编码简单的说是，Base64内容传送编码被设计用来把任意序列的8位字节描述为一种不易被人直接识别的形式。最早使用在windows系统的电子邮件传输的，主要是附件的传输。在那个时候的黑客们也流行过一段base64编码版的木马和病毒。为了简单篇幅，想了解的看这里。
第一次我也是通过这个方法获取的图片的base64编码，主要原因是网上没有现成的转换这种编码的工具，估计已经被大家所遗忘掉了。我这里简单的写了个PHP代码，实现了图片编码的转换：
在线转换：Demo | Download

这个在线转换的背景就是上面那段代码，大家可以通过查看网页源码看到。图片的代码转换原理也很简单，通过读取图片的文件并把图片储存在一个数组（或字符串）里面，然后使用base64_encode转换即可～ok，讲解完毕。

2. 这么漂亮的一个网站你猜猜是怎么开发出来的？自主研发，利用现成的框架？使用的博客系统？
现在提示一点，如果你仔细看cssbeauty和cssmania的底部你会发现他们都是使用Movable Type系统。
难道是WordPress系统？
是不是WordPress？你确认么？
……
答案就是：【WordPress】 <-刮刮看～

CSS Showcase这个网站的LOGO做的就专业化，呵呵，里面好多很多优秀的作品。也许能给你带来一定的启发。你会发现原来CSS Menu还可以这样做。