StyleBox是wordpress平台下的一个插件，给wordpress文章编辑提供了强大的“提示”功能，很多时候在写一篇blog的时候很希望能突出显示一些文字，但却苦于文字颜色太过于单调，不能突出想说明的重点，StyleBox正好弥补了这个缺陷，它使用“图文并茂”的方式让blogger们可以随心所欲的突出自己想说的。

介绍这个插件之前，先show一张StyleBox的效果图：

这个图片显示了StyleBox做出来的几种文本提示效果：Note box, Alert box, Help box, Important Box, Tip Box, Windows box, Linux box.

看到这种漂亮的效果，用wordpress写些文字的时候是不是很希望能有这样的提示框呢，那请继续往下看。

安装StyleBox

1. 从这里下载StyleBox，上传到自己wordpress博客的plugins目录下，然后到后台管理界面中启用StyleBox插件。

2. 如果你用的是wordpress2.9以上的版本，可以直接在后台的“插件”->“添加新插件”中搜索stylebox并安装。

使用StyleBox

1. 制作 Note box:

HTML代码： <p class=”note”>精美的Note box</p>

显示效果：

精美的Note box

2. 制作 Alert box：

HTML代码： <p class=”alert”>精美的Alert box</p>

显示效果：

精美的Alert box

3. 制作  Help box：

HTML代码： <p class=”help”>精美的Help box</p>

显示效果：

精美的Help box

4. 制作 Tip Box：

HTML代码： <p class=”note”>精美的Tip box</p>

显示效果：

精美的Tip box

5. 制作 Important Box：

HTML代码： <p class=”note”>精美的Important box</p>

显示效果：

精美的Important box

6. 制作 Windows box：

HTML代码： <p class=”windows”>精美的Windows box</p>

显示效果：

精美的Windows box

7. 制作 Linux box：

HTML代码： <p class=”note”>精美的Linux box</p>

显示效果：

精美的Linux box

StyleBox的性能：

1. StyleBox插件会在wordpress博客的页面<head></head>中加入一个style.css的样式表文件，这个文件的大小事3.3KB，相信这个不会对页面的加载造成太大影响吧!

2. StyleBox使用的每个图片都是在StyleBox的插件目录下面，这几个图片文件更是小的可怜，这几个图片使用css的background-position来定位，而且兼容 IE 7/8 (不知道是不是兼容IE6，没有试)，Firefox， Chrome (应该也兼容Sarfari)。

StyleBox的使用注意：

你使用的wordpress主题中最好不要有类名为：.note, .alert, .help, .tip, .important, .windows, .linux， 以免冲突导致主题无法正确显示(CSS高手也可以自己去改stylebox的样式表-:))。

相关文章:

  1. How to use Sql Azure
  2. 在.NET项目中使用log4net
  3. 使用InternalsVisibleTo给assembly添加“友元assembly”
  4. Update the application configuration file automatically in C#
  5. 国内的几种【微博】服务使用评测
  6. 很漂亮的适合在windows7&vista下使用的壁纸
  7. 值得深思的“8020法则”
  8. Feed地址更换成feed.irongs.com
  9. 生活中随处可见的雷人图片
  10. 让Linux走出虚拟机