12.2 Tab菜单

在介绍制作”隐藏/显示”方式的不刷新Tab面板之前，先来制作一个比较简单的Tab菜单效果，也就是先从简单的方式引入，为后面的案例做准备。本案例介绍的方法是将每个Tab页作为一个独立的网页文件来实现的。

这个Tab菜单的制作方法与前面介绍的菜单制作方法类似，不同之处在于需要设置一些特殊的CSS效果来实现“Tab”的样式。菜单本身仍然是项目列表的扩展，本例的最终效果如图1所示。本实例的文件位于网页学习网CSS教程资源中“第12章\01\home.htm”。

图1 Tab菜单

一、搭建HTML结构

首先跟所有的菜单一样建立相应的项目列表，所不同的是因为有多个页面，所以需要给每个项目都定义一个CSS类型，并为<body>标记分配各自的id，代码如下所示。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板

除了每个页面的具体内容，即“<div id="content">””中包含的部分以外，所有页面的整体框架都是完全相同的。每个页面都采用<link>语句调用相同的CSS外部文件，而页面的具体内容所采用的CSS．则放在页面内用<style>标记控制，代码如下所示。

折叠XML/HTML 代码复制内容到剪贴板

二、设置整体的样式

在外部的tab.css文件中定义各个CSS属性。首先给正文的内容“#content”添加蓝色的边框，但是只添加左侧、右侧和下端，空出上端。lodidance.com

折叠CSS 代码复制内容到剪贴板

三、设置Tab的样式

现在设置<ul>标记的CSS属性。除了将项目符号隐藏外，还要为其添加下边框，用来当作正文内容的上边框，代码如下所示。这样在<ul>标记中设置的边框便可以被稍后设置的<li>标记中的边框所覆盖，从而实现Tab的效果。

折叠CSS 代码复制内容到剪贴板

接着设置<li>标记的样式，将所有的列表项水平排列，设置相应的背景颜色和边框等，并通过margin属性适当地调整其位置，代码如下所示。可以看到Tab菜单已经初现雏形。

折叠CSS 代码复制内容到剪贴板

设置所有超链接的3个伪类别。同样将<a>设置为块元素，并配合页面的整体色调和Tab菜单的大小等，代码如下所示。

折叠CSS 代码复制内容到剪贴板

四、设置当前页的Tab样式

由于为每个页面的<body>标记都添加了惟一的id，因此可以设置当前页面的菜单项，如home.htm的“Home”菜单等，代码如下所示。关键在于给当前页面的菜单项添加白色的下边框，从而覆盖了<uI>标记中设置的蓝色下边框，实现了Tab菜单的效果。

折叠CSS 代码复制内容到剪贴板

现在已经完成了Tab菜单的核心部分，下面为当前页面的菜单项添加单独的超链接效果，以区别于其他页面，代码如下所示

折叠CSS 代码复制内容到剪贴板

最后还可以为每个页面添加相应的内容。内容部分使用的CSS与公共的CSS样式文件分别存放，可以使用<style>嵌入到页面中，代码如下所示。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板

本案例重点介绍了如何制作Tab菜单，因此每个页面内部的样式就不再进行设置了，这样整个Tab菜单模块便制作完成了。