>>> 下载【朝花夕拾 – DIV+CSS布局实战系列视频教程】图片素材

>>> 点击浏览 – 朝花夕拾系列视频教程 – 最终效果图

上节教程的重点我们放在网站标题文本的样式定义上，其中引入了上下文选择符的用法，它在CSS设计中使用得非常广泛，在之后的教程中我们还是会经常使用到它，当然还有很多其它形式的CSS选择符组合方式。本部分教程的重点主要放在网站导航菜单的构建上，在这个过程中将引入很多新的CSS属性及其用法。首先我们在上节完成的ID为topbar的DIV下面添加一个新的DIV容器：

我们的导航菜单会以无序列表的形式添加到这个DIV中，在那之前先要定义一些CSS，主要是为它定义背景图片。再罗嗦的强调一次，DIV容器本身默认是没有任何高度值的，它会根据其里面的非浮动内容元素进行高度上的自适应，但是光是背景属性是不会使DIV产生这种高度扩展的，所以在CSS中我们必须明确定义它的高度：

有些朋友可能疑惑了，我们的背景图片高度是158像素，而CSS中为什么是154呢？仔细观察一下header.jpg这张图片，在其底部有一块白色区域，严格来讲这块白色并不能算是背景图片：

解决这个问题的办法不外乎两种，一是把图片重新处理一下，把底部的那片白色裁剪掉，然后你可能就会发现图片的高度就是154像素；第二个办法就是跟我们操作的一样，利用CSS来”裁剪”背景图中多余的部分。当然，最理想的情况就是最初切图的时候，尽量不要出现类似这种细节上的误差，我们也就不必花时间和心思去考虑这些事情了。

接下来我们把导航菜单以列表的形式添加到ID为header的DIV容器中：

很简单的一个结构，预览效果如下：

接下来就是CSS的工作了，首先对UL列表我们定义如下CSS：

第一条规则的作用是去掉列表项中默认的小圆点，有些朋友可能在IE等浏览器中没发现这些圆点项目符号，我只能说是这些浏览器自作聪明，大家不妨用火狐浏览器来预览一下未定义#nav样式之前的页面：

所以建议大家设计网页的时候，最好能借助IETester之类的软件在多款浏览器中边制作边进行兼容测试，可能一张网页在火狐中一直好好的，完工之后在IE中打开一看，你就知道”面目全非”这四个字怎么写了…第二条CSS规则的目的是把导航菜单定位到header容器的底部，属性PADDING后面的三个数值分别表示上、左右、下这三个方向的填充空间，当然现在来讲这个效果还是太早了点：

现在将列表项转换为内联元素，使它们同行显示：

离最终效果图中的导航外观似乎还有相当大的距离，事实上我们只需要在CSS中再做一点点工作就可以了，为了避免头脑混乱，在这里还是先把CSS全部贴出来，我们再慢慢解释吧：

事实上也没什么好解释的，文本颜色、文本修饰、背景图片、左右边框等等这些属性就算对于初学者也不是很难的事情。首先必须明确的是，这段CSS的选择符所针对的是列表项中的超链接对象，没有指定:link、:visited等伪类就表示链接的四个状态沿用同一种样式。超链接本身是一种内联级对象，我们利用display强制转换成块级对象之后，就可以自由的控制它的尺寸并应用高度、背景、边框等属性了。当然，成为块级元素之后，会破坏原来预期的导航菜单项同行排列的效果，所以我们在CSS中为链接对象定义了左浮动属性。

最后为菜单添加鼠标经过背景切换效果：

顺便再提一点元素尺寸控制上的问题，本节教程中很多地方涉及到垂直方向上的数值调整，最主要的就是如何让导航精确的定位在header容器的底部，这当中有很多数值在起作用，如#nav的上方填充、#nav li a的高度及其PADDING等，这些属性如何取值并不是去胡乱估计的，我们要下意识的去寻找一些参考，比方154减去119还剩余大概多少像素，这些剩余像素在高度、填充、边界等属性上如何分配等，有了这些思维，我们能节省很多预览调整方面的工作量。

[ 以下内容您也可能感兴趣 ]

• 开宗明义 – CSS入门视频教程 (1)
• 学习其实并不枯燥：漫画图说DIV+CSS网页布局（下）【完结】 (0)
• 学习其实并不枯燥：漫画图说DIV+CSS网页布局（中） (0)
• 学习其实并不枯燥：漫画图说DIV+CSS网页布局（上） (0)
• CSS入门电子书宝典：《CSS设计彻底研究》PPT课件及样章下载 (0)