眼馋firefox的页面搜索有高亮的效果，很想在blog上也搞一个这样的效果，如果你也眼馋的话，来试一试吧．
其实每什么难的，加一个插件不就好了，so more for wordpress.我用了一个名为google highlight的插件（默认不支持中文），虽然名字里只有google，但是它还支持了lycos,yahoo和wordpress的站内搜索，（本站启用了livesearch，说不定过几天后也支持了 :)）
使用方法很简单，放到plugins目录，然后后台激活．over
接着你就可以尝试一些花哨的想法，比如高亮闪烁（一点也不花哨...） ，还可以修改，让它支持中文字符（修改成中文支持以后，判断高亮变得不太准确了...）
试一下效果，点击 mootools+lightbox
如果你觉得还可以的话，继续看下面的代码(基于mootools)
var searchHilite = new Class({
initialize: function()
{
this.hlclass = "hilite";
this.items = $A(document.getElementsByClassName(this.hlclass));
if (this.items.length == 0) return false;
this.hilite();
},
hilite: function()
{
this.items.each(function(item)
{
new Fx.Color(item,'background-color',{duration: 2000}).custom('#ffffff','#D81317');
new Fx.Color(item,'color',{duration: 2000}).custom('#999999','#ffffff');
});
}
});
window.onload = function () { new searchHilite(); }
ok,love your owner highlight
lightbox是个经典的东西，造就了一种新的图片浏览方式。mootools是一个新发布的framework,现在要说的是这两个的结合品。
本来lightbox是使用Prototype + Scriptaculous的方式，不可否认Prototype是一个很好的framework,（mootools也有很多借鉴它的地方），不过这些天用下来，总觉得mootools有一种很轻逸的感觉(- -!)
转到正题，我们要做的就是mootools + ?? 做出Prototype + Scriptaculous + lightbox的效果。原作者：Christophe Beyls(可能需要代理才能访问，方正我是访问不了)
需要的东西
mootools.77 可以到mootools download页面下载，需要至少
- Native scripts: 全部选择
- Addons: 选一个Fx.js
- Plugins: 选一个Window.js
然后就是那个?? －moobox.js使用的方式跟lightbox2一样，预览的效果在这里
Valerio 今晚发布了 Mootools,又是一个javascript framework,集成了 Valerio 以前做的 效果类 ( moo.fx ) Ajax类 ( moo.ajax ), Dom选择类 ( moo.dom ), 另外加了拖拽(Drag and Drop), Sortable lists(中文不知道该怎么解释，效果是在一个“狭小”的空间里有一个列表可以拖拽排序 ^^!), Cookies管理以及其他一些功能。做成了一个a choice of more than fifteen scripts, plugins and addons(额...虽然能理解，但是不会用中文解释，小学没好好念书...)
用 Valerio 自己的一句话来说
mootools infact, makes it possible for you to extend HTML elements with your own methods, to make your life easier, and your coding style alot cooler.
— Valerio
下载 | 文档 | 演示(later)
今天遇到一个很诡异的问题，记得以前也遇到过，不过上次碰到的时候，回避了一下，那时候太忙了(^ ^!) 问题是在li标签里加img标签的时候，在img下会出现5px的空隙。结构是这样的：
<ul>
<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
<li><img src="ss.gif" width="100" height="40" alt="ss"></li>
</ul>
结构很简单，不过问题就出来了，效果看这里
在尝试中发现在img标签里加align="center" 或者 加样式 img {vertical-align: top;} 就可以解决了。暴汗...目前还不知道原因
8.28 update: : 在blueidea上发现一个帖子IE图片下空隙问题解决方法集合，不过还是没人说明产生问题的原因...
FROM：Understanding “Any order columns”
我们在这里要解决的是：一个3栏的页面结构，源代码是这样的结构— main, nav, 和 links — 我们要做的是通过css的定义来使它以任意的排列结构显示出来.
我们的代码包含3个 divs, 每个都有相应的 id 和内容.
[...content ...]
[...content...]
[...content...]
首先我们要做的是给它们定义相应的宽度和向左(left)的浮动(float)值, 以及清除一个windows下IE的元素浮动BUG.
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
}
#nav {
float:left;
width:20%;
}
#links {
float:left;
width:20%;
}
好的. 这个是现在的3栏结构, 当然如果我们需要改变3栏结构的显示次序，我们可能需要修改网页源代码的结构。
解决办法
首先, 我们尝试互换 main 和 nav 分栏的位置，这样的话 nav 就在左边, main 就在中间了。 很明显的，我们给 main 分栏一个 left-margin of 20% 让它空出一块地方(暂且给它个命名：地盘A)给 nav 分栏，接着通过一个负的left-margin of -70% 把 nav 分栏移动到我们的目的地. 搬家成功.
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
margin-left:20%;
}
#nav {
float:left;
width:20%;
margin-left:-70%;
}
#links {
float:left;
width:20%;
}
接着, 我们试一下让 nav 和 links 分栏调换位置. 当然， main 分栏就不需要怎么动了，保持它的 left-margin of 20%. 我们去除 nav 分栏的负 left-margin ，同时用一个负的 left-margin of -90% 把 links 分栏移动到(地盘A).
#main {
display:inline; /* Fixes IE Double Margin Float Bug */
float:left;
width:50%;
margin-left:20%;
}
#nav {
float:left;
width:20%;
}
#links {
float:left;
width:20%;
margin-left:-90%;
}
并不华丽的演示。你可以动手尝试一下，真的非常简单。
其他相关页面
网上的前辈们说表单的设计也是一门学问，去网上搜索了下资料。原文参考这里
先看一下表单排版：一个核心的衡量标准，最适合阅读和辨认习惯的为最佳的选择，同时根据表单内容尝试不同排版，并从中找出最合适的排列模式。
接着是背景区域的划分方式：简单的背景区分，也能达到很好的功能提醒的作用，当然这也要平衡运用，做到简洁有效；
还有是分清主次交互：交互节点（按钮）最大的作用是引导用户进入下一个流程，如果交互点含糊不清，会导致用户迷失该进入的步骤而导致整个交互过程的失败。
上面是局部细节，下面是整体调整：视觉辨别和阅读习惯还是最重要的考虑因素， 下图的简单提示能给我们很多设计提示。
相关内容还有：