一起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
• 前沿的一个例子

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

XHTML代码：

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

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/

用 css 控制页面，必须用好选择器，否则可能会因为 css 的继承及权重等特性而得不到想要的效果。常用的 css 选择器有：标签选择器、类选择器、ID选择器。我们所见到的选择器几乎都是这三种。然而 css2 还有其他选择器，如：子选择器、相邻选择器、属性选择器，用好这些选择器，能少定义 class 或 id。那么这些 css 高级选择器怎么使用呢？

1、子选择器

子选择器，顾名思义就是选择一个元素的子元素，不包括子元素的子元素。它的符号是大于号“>”。如：

XHTML代码：

CSS代码：

你可以点击这里查看效果。

显示效果为“链接1”是红色，而“链接2”则不受影响。如果把“>”换成空格的话，那么css的继承特性会使两个 a 应用样式；如果不用子选择器的话，那就不得不给第一个 a 定义 class 或 id。

2、相邻选择器

相邻选择器就是选择相邻的标签，它的符号是“+”。这里会出现两中情况：

1）如果相邻的两个标签不同，则应用到后一个标签的第一个的标签；

2）如果相邻的两个标签相同，则应用到该标签的除第一个以外的标签（语句有点拗口，看实例能更好的理解）。

以下面的XHTML为例子：

针对第一种情况：

查看效果。效果是第一个p为红色。

针对第二种情况：

查看效果。效果是除第一个p外的p为红色。

3、属性选择器

属性选择器是针对HTML标签中的属性进行选择的。例：

XHTML代码：

CSS代码：

查看效果

a[title] 是选择定义了 title 属性的 a 标签，a[title="home"] 是选择定义了 title="home" 的a标签。另：属性可以不加双引号，也可以是单引号，如 a[title="home"] 也可以写成 a[title=home] 或 a[title='home'] 。

从例子中可以看到这三个选择器确实能减少网页中的class或id，但遗憾的是 IE6 均不支持。万恶的 IE6 。不过 IE6 的使用者正在减少，虽然速度比较慢，但这个趋势是不可避免的。