什么是GreaseMonkey脚本? Greasemonkey 是一个 Firefox 扩展，它具有通过编写脚本来改变被访问网页的功能。使用它，能使您访问的网站更便于阅读或者更便于使用。使用它，您能修复网页渲染的缺陷，而无须烦扰网站 管理员。使用它，您能让网页更好地使用残疾人援助技术，清楚响亮地说出网页内容，或者将网页内容变为盲文。使用它，您能自动地获得其它网站的数据，从而使 两个网站更好地相互链接起来。 然而 Greasemonkey 本身并没有作这些事。实际上，在您安装它之后，您注意到根本没有任何变动…直到您开始安装一种叫做“用户脚本”的东西。用户脚本(user script)就是一大块 Javascript 代码，还有些附加信息，用来告诉 Greasemonkey 脚本应该在何时何地运行。每个用户脚本能够针对具体页面，具体网站，或者一批网站。用户脚本能做到您在 Javascript 中可做到的任何事情。实际上，它能做得更多，因为 Greasemonkey 提供了专供用户脚本使用的函数。via 如何安装GreaseMonkey和脚本? Greasemonkey的安装非常简单，和安装其它所有Firefox插件一样，到官方主页下载http://www.greasespot.net，选择工具 (T)单。您应该看到四个菜单项：启用 (E)、管理用户脚本 (U)…、新建用户脚本 (N)…和用户脚本命令 (C)。 只要管理用户脚本 (U)…可以使用，那么就装好了。装用户脚本也很简单，点击要安装的脚本链接，会弹出一个标题为“Greasemonkey 安装过程”的对话框，其中显示了将要安装的用户脚本名称，简介以及作用与排除的页面列表。确定安装即可。 GreaseMonkey脚本推荐 下面就推荐一些比较受欢迎的Greasemonkey脚本。 1. Gmail的Greasemonkey脚本 Google Account Multi-Login 可以将Gmail右上角的Logout变成选择多个Gmail帐号切换按钮，适合多个Gmail帐号使用者。 Right Click Menu in Gmail 在你的Gmail中增加右键功能，右键包括“inbox”, “compose new”, “sent messages”, “contacts”等。 Folders4Gmail 用类似文件夹的形式来管理你的Lables。 Gmail Super Clean 美化Gmail界面。 Gmail HTML Signatures 为Gmail增加 HTML签名，也可以使用我之前介绍的WiseStamp。 Gmail Filter Assistant Fliter助手，增加一个Filter管理模块，是你能够方便的创建filter。 Gmail Addons 增加各种功能到Gmail，包括Calendar等。 Gmail + Reader Integrator 喜欢 Gmail 和 Google Reader 的你怎么可以错过这个在 Gmail 里面看 Google Reader 的 addon ？ Gmail Spam-count Hide 隐藏 Gmail 中垃圾邮件的计数。就是传说中眼不见为净的境界。 2. Google日历的Greasemonkey脚本 Google Calendar Header and Navigation Switcher 在 Google 日历的左侧和顶端显示小三角，点击它们可以隐藏 / 显示左侧栏和顶部空间，最大化主区域的面积，折叠状态可记忆。 Google Calendar Wheel Viewer 在月视图、自定义视图中用鼠标滚轮翻屏，这是 Google 日历自身没有提供的。 Google Calendar Display Current Time Line 在日视图、周视图、自定义视图中显示一条当前时间的红线，适合日程多的大忙人使用。 3. Google Reader的Greasemonkey脚本 Google Reader: Show Feed Favicons 在Google Reader中显示Feed Favicons。 Google Reader Subscribers Count 在右下角显示此feed有多少用户通过google reader订阅。 Google Reader Redux 安装后你的Google Reader里所订阅的RSS Feed将会作为一个新菜单项出现在Gmail左侧上方。 Google Reader Preview Enhanced 增加Feed网页预览功能。你可以在feed的List和expand视图进行预览。 Google Reader for wider screens 改变Google Reader现实宽度，以使宽屏电脑用户获得更好的用户体验。 Google reader full feed changer 现在有些Feed不是全文输出，怎么办呢，可以使用此脚本，实现获取feed全文。 Google Reader Minimalistic 获得最简洁的Google Reader界面。 Colorful List View 这个脚本的功能是给Google reader的list view根据不同的feed着色，效果是很华丽的。如果你的feed不多，用这个脚本可以清楚地分别出不同来源的文章，但如果你有几百个不同的feed，这个脚本恐怕不适合你，太花了。 GoogleMonkeyR 超强的google搜索结果页增强脚本，功能包括多列显示搜索结果、移除右侧付费结果、给搜索结果编号、自动载入翻页结果等等。必装。 4. Google搜索的Greasemonkey脚本 Google Thumbnails 在搜索结果前增加网页的缩略图。 GoogleTagCloudMaker 利用搜索结果显示出一个Tag Cloud，让你更方便找到相关的内容。 Google 100 让Google每页显示100个搜索结果 Google Air Skin 可拥有多个Google应用服务的皮肤。 AutoPagerize (Pagination) 自动翻页脚本。 Google Ad Remover 从Google搜索结果中去除任何广告。 Google Account Multi-Login 多个Google账号登录。没什么需要解释的，如果有好几个Google账号的话，这个脚本很方便。 Google Shortcuts 也是针对Google搜索的一个脚本，安装后，在Google主页输入i:搜索内容 可以直接调用google图片搜索，输入w:搜索内容 则是调用wikpedia, y: 自然是youtube了。 Google Search Sidebar for FF3 为 Google 搜索结果页面加入一个右侧边栏，其中包括来自 Wikipedia、YouTube 和 Flickr 的搜索结果。只要 Google 一次，就能得到这许多结果，相当方便。 Multi-Column Results 将 Google 搜索结果分为多栏，使用 Alt + 1/2/3 组合键可在一栏、二栏、三栏切换，适合宽屏用户。 Google Time Search 提供选项，让你可以搜索指定时间范围内的网页（如过去 24 小时）。 Twitter Search on Google Search Pages Twitter 已经成为最为实时的信息中心，这个 GreaseMonkey 脚本能将 Twitter 搜索结果结成到 Google 中。 Fixed Topbar 提供一个悬浮的导航条，包括到新闻搜索、图像搜索和翻页的连接，可以节省你不少时间。 Delicious Search Results on Google 将 Delicious 的搜索结果集成至 Google。 5. 通用的浏览器辅助增强Greasemonkey脚本 GoogleTagCloudMaker 自动在搜索结果的右边生 CSS网页布局的一大特点就是列表元素的应用，在传统的表格布局中往往将列表元素作为表格来处理，这样的方式非但不具有语义还产生了许多不必要的代码。
今天我们共同学习一款“图文混排CSS列表”的制作。首先从分析一下此列表的特点，然后编写HTML代码，最终应用CSS样式实现最终的效果。
列表的效果如图所示：
最顶部是栏目名称“模板无忧 MB5U.com ”与栏目导航“CSS酷站欣赏 DivCSS教程 CSS模板下载”。栏目名称用标题元素Hx来表示，栏目导航可以用ul li的无序列表。
下部的三个链接区域形式基本雷同，左侧是图片链接，右侧是文章列表元素。将左侧的图片与文字看成是一个段落，用p标签来表示，右侧的文章列表用ul li的无序列表。
有了上面的分析开始下面的HTML编码：
Example Source Code [myeducs.cn]
将所有元素置入id为list_mb5u_com的层中，以便于进行整体布局的控制。在其内部建立四个层，它们分别是：list_title、l_showcase、l_article、l_templates。对于下部的三个内容层，应用同样的class，为list_unit。
下面开始具体深入的编写HTML代码：
Example Source Code [myeducs.cn]
在list_title层，置入h3元素作为栏目名称，建立一个ul列表放置栏目导航。
下部的三个内容层（list_unit），分别置入段落标签p，引入链接图片与文字；建立一个ul放置文章列表。
在最底部，放置一个类为clear的层来清除浮动。
有了上面的基础开始下面的CSS编码：
Example Source Code [myeducs.cn]
整体布局声明：
设置整个层的样式，宽度为418px，上下外边距为30px，左右为自动实现水平居中对齐。边框设置为1px的灰色实线。
Example Source Code [myeducs.cn]
标题区域list_title层的CSS样式定义：
设置list_title层宽度与高度分别是：418px、32px；下边框为1px的灰色实线；设置背景色及溢出隐藏。
栏目名称h3元素向左浮动；宽度160px；行距32px实现文字垂直居中对齐；文本缩进为15px。紧接着设置栏目名称h3链接的样式。
栏目导航ul列表的CSS样式，向右浮动；宽度为230px；设置列表项li向左浮动；行距为32px；上下内边距为0，左右内边距为5px；紧接着设置链接文字大小与颜色。
Example Source Code [myeducs.cn]
内容层（list_unit）整体样式定义：
向左浮动；宽度为388px，左外边距为15px，上内边距15px、下内边距8px；设置下边框为浅蓝色的虚线。
设置为内联是避免IE的双边距BUG。
Example Source Code [myeducs.cn]
内容层（list_unit）内图片链接样式定义：
整个段落p，向左浮动，宽度为164px。
设置链接为块元素；设置边框为1px蓝色实线。
链接悬念状态下，边框变为1px深蓝色虚线。
链接元素内的图片定义，宽度与高度分别是：160px、120px；外边距为1px；边框为0（消除图片链接浏览器的默认边框）。
设置链接文字样式，由于上面的设置是整体的，因而在下面的内容中，注重将上面的一些内容层叠掉。
将span转换为块元素。span内的链接同样转换为块元素，设置宽度与高度分别是164px、22px；设置边框为0（层叠先前的设置）；行距设置为22px；文字水平居中对齐。
span内的链接文字悬停状态下，设置边框为0；颜色设置为#c00；显示下划线。
Example Source Code [myeducs.cn]
内容层（list_unit）内文章列表样式定义：
整个列表ul向右浮动；宽度为216px；上外边距为-5px。
列表项li的CSS样式设置，向左浮动，宽度为216px；行距为22px；颜色为#039；后面的三个属性是实现“截字”效果，mb5u.com网站上有具体的介绍。（请注重此效果在FF下无效）
Example Source Code [myeducs.cn]
最后的CSS设置：
最后一个内容层（list_unit）是没有下边框的，此层的id为l_templates。因而在此进行层叠定义，消除此层的边框即可。
清除浮动是必须的，否则在FF下可能会出现混乱。这是一个良好的编码实践。
