四、细节

今天先来研究第一个细节——导航菜单

在红邮票这个主题中，导航菜单本身的背景色是黑色的，但当鼠标经过时，会呈现白色的背景，这是如何实现的呢？是用css当中的背景色设置吗？看了这部分的php语句和css就清楚了。

<div id="menu">
<div id="menu_pad">
<div id="menu_items">
<a href="<?php bloginfo('home'); ?>">Home</a>
<?php wp_list_pages2(); ?>
</div>
</div>
</div>

div#menu a{color:#FFFFFF;line-height:25px;} /*链接颜色和行距*/
div#menu a:hover{color:#ea1c24;line-height:25px;}/*当鼠标经过链接时颜色和行距*/
div#menu #menu_items div{float:left;margin-right:15px;padding-right:8px;padding-left:8px;height:30px;}/*设置内外边距、高度并向左浮动*/
div#menu #menu_items div:hover{float:left;margin-right:15px;padding-right:8px;padding-left:8px;background:url(images/s_menu_bg.gif) repeat-x center left;height:30px;color:#ea1c24;}/*当鼠标经过时的背景图片、高度、内外边距、链接颜色、向左浮动*/

原来，作者是用<div>标签将导航菜单的每个链接包装起来，再给<div>标签添加背景图片之后产生的效果，因为每个菜单链接，如home和about的宽度是不一样的，所以这个背景图片只有一个像素宽，并沿x轴平铺，适应了不同宽度的需要。之所以要将导航链接用<div>标签包装起来，是因为<div>标签是一个块级元素，可以设置高度值，使得给链接添加背景图片成为可能。

还有一个问题，明明只给home链接包装了<div>标签，为什么其它的链接，比如about也改变了样式呢？这就要注意到<?php wp_list_pages2(); ?>这个php语句了，尤其是那个2字，我发现当把2字去掉以后，再来查看页面的源代码，发现除home之外，其它的链接的<div>标签消失了，随之链接的样式也消失了，而加上2字之后，<div>标签又出现了，链接又恢复原样了。我还没弄明白<?php wp_list_pages2(); ?>这句php语句中的2到底是什么作用，如果谁知道的话，希望不吝赐教。