青色's Blog

半透明效果越来越常见，如果应用的好的话，能给网页带来很美观的效果。

由于各个浏览器差异，所以半透明效果实现起来还是有一点麻烦的。

IE 使用滤镜，即 filter:alpha(opacity=x) ，x 取值范围为 0 - 100 。默认值为 100 ，不透明。 0 为完全透明。

FF 使用其私有属性：-moz-opacity ，其后直接加数值，取值范围为 0.0 - 1.0 。默认值为 1 ，不透明。 0 为完全透明。

CSS3 半透明属性 opacity ，其后也是直接加数值，取值范围同样为 0.0 - 1.0 。

虽然 IE 和其他浏览器实现的方法不一样，但一起用，就都有效果了。看例子：

XHTML代码：

CSS代码：

虽然 FF 有私有属性设置半透明效果，但它支持 CSS3 标准半透明属性 opacity ，那当然选择标准了。

查看效果

从效果里可以看到子元素的半透明效果，透出了父元素的背景颜色。

要注意的是：必须给需要半透明的元素设置背景颜色为白色，否则没有效果。而对于 IE 又还需要设置宽度或高度属性，否则也没有效果。如上例把 width:100% 去掉则没有效果。

还需要说明的是：IE 滤镜不能通过 W3C 验证。

一个更具体的例子

标签：CSS , 半透明

下拉菜单由于实用，所以受到人们的欢迎。下拉菜单通常是由javascript来实现的，也应该由 javascript 来实现，因为这属于行为层范围。然而大家知道，使用 CSS 的 :hover 伪类也可以制作下拉菜单，比起javascript来，使用CSS制作更简单，且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类，所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯CSS下拉菜单，现在我们就利用 IE条件注释来制作一个纯CSS下拉菜单。为了便于理解，选择了很很简单的代码，至于更复杂的，大家可以触类旁通、举一反三。

XHTML代码：

CSS代码：

查看效果

在 IE7 和 FF 等标准浏览器中，下拉菜单可以正常使用，但 IE6 中却没有效果。

既然 IE6 只有 a 标签才支持 :hover，那就加上 a 标签。XHTML代码改写成:

CSS代码改写成：

查看效果

然而在 IE6 中依然没有效果，为什么呢？难道代码有错？其实代码没有错，这是 IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0，即CSS代码再次改写成：

查看效果

此时在 IE6 中鼠标移动到上面下拉菜单出现了。

然而给每个菜单加上连接的时候，IE6 里又不行了，为什么？为什么？不知道。。。不过再给 IE条件注释里的 a 标签里再套上一个表格，即XHTML代码改写成如下：

查看效果

此时，下拉菜单在 IE6 里没有问题了。

更多例子：

• 纯CSS下拉菜单1
• 纯CSS下拉菜单2
• 纯CSS下拉菜单3
• 纯CSS下拉菜单4
• 纯CSS下拉菜单5
• 前沿的一个例子

标签：CSS , ie6 , 下拉菜单

上次发表的《IE条件注释》一直都觉得不完整，还存在一个问题，即：如何让非 IE 浏览器显示 IE 条件注释里的内容。曾经在嗷嗷的博客里看到相关方法，可今天再去已经没有了（难道我记错了？）。还好又在蓝色理想里一种方法（似乎比嗷嗷的更好些），这种方法是把 IE 条件注释和 HTML 的注释一起使用，以达到“欺骗”浏览器的效果。具体看例子：

XHTML代码：

以上代码 IE 浏览器识别 IE 条件注释，其解释为：如果不是 IE 浏览器则显示其中的内容，所以 IE 浏览器不显示其中的内容；而非 IE 浏览器则只识别 HTML 注释，即“<!--”和“-->”之间的会被看成是注释，并且是完整的解释，所以非 IE 浏览器显示了其中的内容。

标签：IE条件注释

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：

从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE 盒子模型

从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

例：一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的实际大小为：宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px；如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 20*2+200=240px、高 20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。

那应该选择哪中盒子模型呢？当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢？很简单，就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明，那么各个浏览器会根据自己的行为去理解网页，即 IE 浏览器会采用 IE 盒子模型去解释你的盒子，而 FF 会采用标准 W3C 盒子模型解释你的盒子，所以网页在不同的浏览器中就显示的不一样了。反之，如果加上了 DOCTYPE 声明，那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子，网页就能在各个浏览器中显示一致了。

再用 jQuery 做的例子来证实一下。

代码1：

查看效果

上面的代码没有加上 DOCTYPE 声明，在 IE 浏览器中显示“IE盒子模型”，在 FF 浏览器中显示“标准 W3C 盒子模型”。

代码2：

查看效果

代码2 与代码1 唯一的不同的就是顶部加了 DOCTYPE 声明。在所有浏览器中都显示“标准 W3C 盒子模型”。

所以为了让网页能兼容各个浏览器，让我们用标准 W3C 盒子模型。

标签：CSS , jQuery , w3c , 盒子模型

wordpress 中文工具箱是用来解决官方 WordPress 没有照顾到的中文相关问题。使用这个插件，你可以显示随机文章，最新留言，留言最多文章，发表评论最多的网友，以及真正的文章摘要（如果你的模板里使用的是the_excerpt()来调用内容的话）等等，真正截断，没有乱码。

这个插件由 WordPress 随机文章和 WordPress 评论插件合并增强而来。在激活这个插件之前，请务必先停用这两个插件，不然的话会有冲突。

下载：mulberrykit.zip

安装：

解压缩，把 mulberrykit.php 上传至 /wp-content/plugins/
在管理界面里激活 中文 WordPress 工具箱插件（如果你在使用 WordPress 随机文章和 WordPress 评论插件，务必先停用这两个插件。）

使用说明：

1、最新回响

<?php get_recent_comments(); ?>

调用方式：get_recent_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false)

• $no_comments：显示回响数，缺省为5条
• $before：每条记录前显示的文字，缺省<li>
• $after：每条记录后显示的文字，缺省</li>
• $show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)

补充：

kdolphin 在回应里提出，希望在最新回响里不显示自己的回应。这很容易做到。在get_recentcomments() 这个函数里找到这一句：

post_status = 'publish'

在后面加上

AND comment_author != '你的名字或你的帐号'

注意：最好在wp的插件编辑窗口下改，以免乱码的问题。

根据网友的建议加上了两个相关的函数：

• 仅显示留言，不包括引用 <?php get_recent_comments_only (); ?>
• 仅显示引用（包括trackback和pingback）<?php get_recent_trackbacks(); ?>

调用方式与<?php get_recent_comments(); ?>相同。

2、最新文章

<?php get_recent_posts(); ?>

调用方式：get_recent_posts($no_posts = 5, $before = '<li>+ ', $after = '</li>', $show_pass_post = false, $skip_posts = 0)

• $no_posts：显示文章数，缺省为5条
• $before：每条记录前显示的文字，缺省<li>
• $after：每条记录后显示的文字，缺省</li>
• $show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)
• $skip_posts：跳过多少篇文章，缺省为0

3、评论最多的帖子

<?php get_mostcommented(); ?>

调用方式：get_mostcommented($limit = 5)

4、发表评论最多的网友

<?php get_commentmembersstats(); ?>

把代码里面的blogmaster改成你自己的名字，可以滤掉你自己的名字。

调用方式：get_commentmembersstats($threshhold = 5)

5、随机文章

<?php random_posts(); ?>

调用方式: random_posts ($limit = 5, $length = 400, $before = '<li>', $after = '</li>', $show_pass_post = false, $show_excerpt_in_title = true)

• $limit：显示文章数，缺省5篇
• $length：摘要长度，缺省400
• $before：每条记录前显示的文字，缺省<li>
• $after：每条记录后显示的文字，缺省</li>
• $show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)
• $show_excerpt_in_title：是(true)，摘要显示于文章链接的title；否(false)，直接显示于页面；缺省是(true)

6、显示摘要

某些情况下需要输出摘要，比如搜索结果、档案，还有 rss 输出，这样可以节省流量资源。但是，如果你的文章是中文的话，官方 WordPress 输出的其实并不是摘要，它只是把文章里的 html 代码过滤掉了，但所有文字都还是原样输出了。激活这个插件后，输出的就是真正截断的摘要了。

文章转摘自：http://yan.me/dia/wordpress/kit/

标签：WordPress , wordpress插件