网页上的导航是列表的一种形式，选项卡式导航就像一个水平列表。使用CSS创建水平选项卡式导航相当容易，但CSS 3为我们提供了一些工具，使它们看起来更好。
本教程将向您介绍创建CSS选项卡式菜单所需的HTML和CSS。单击该链接以查看其外观。
此选项卡式菜单使用没有图像，只需HTML和CSS 2和CSS 3.可以轻松编辑它以添加更多选项卡或更改其中的文本。
浏览器支持
此选项卡菜单将适用于所有主流浏览器。 Internet Explorer不会显示圆角，但除此之外，它将显示标签，如Firefox，Safari，Opera和Chrome。
写下你的菜单清单
所有导航菜单和选项卡实际上只是一个无序列表。因此，您要做的第一件事就是编写一个无序的链接列表，指向您希望选项卡式导航的位置。
本教程假设您在文本编辑器中编写HTML，并且知道将网页的HTML放在网页上的位置。
写下这样的无序列表：
类=“标签列表”>CSS 3ID = “当前”>选项卡对于菜单
类=“标签列表”和ID = “当前”。首先是 需要。如果你不把标签列表在无序列表上的类，选项卡将不起作用。第二个是可选的。放在ID = “当前”在您希望在该页面上突出显示的任何标签上。我们通常使用它来突出显示我们所在的页面，但您可以使用它来突出显示最重要的选项卡。或者你可以完全删除它。
开始编辑样式表
您可以使用外部样式表或内部样式表。示例菜单页面使用内部样式表
该文件。首先，我们将为UL本身设计风格
这是我们使用该课程的地方标签列表 在HTML中。您应该仅设置UL类的样式，而不是为您的页面上的所有无序列表设置样式的UL标记样式。标签列表 所以CSS中的第一个条目应该是：
.tablist {}
我们希望提前输入结束大括号（}），所以我们以后不要忘记它。
虽然我们在选项卡菜单列表中使用了无序列表标记，但我们不希望任何项目符号或数字进入。所以您应该添加的第一个样式是。列表样式：无; 这告诉浏览器虽然它是一个列表，但它是一个没有预定样式（如项目符号或数字）的列表。
然后，您可以设置列表的高度以匹配您想要填充的空间。我们为我们的高度选择了2em，因为它是标准字体大小的两倍，并且在标签文本的上方和下方提供了大约一半的em。高度：2em的; 但您可以将宽度设置为您想要的任何尺寸。 UL标签将自动占据宽度的100％，因此除非您希望它小于当前容器，否则可以将宽度取消。
最后，如果您的主样式表没有UL和OL标记的预设，您将需要将它们放入。这意味着您应该关闭UL上的边框，边距和填充。 填充：0;余量：0; border：none; 如果您已经重置了UL标签，则可以将边距，填充或边框更改为适合您设计的内容。
您的最终.tablist类应如下所示：
.tablist {list-style：none;高度：2em的;填充：0;余量：0; border：none; }
编辑LI列表项
一旦设置了无序列表的样式，就需要在其中设置LI标签的样式。否则，它们将像标准列表一样运行，并且每个都移动到下一行，而无需正确放置标签。
首先，设置你的样式属性：
.tablist li {}
然后你想浮动你的标签，使它们在水平面上排成一行。 向左飘浮;
并且不要忘记在选项卡之间添加一些边距，因此它们不会合并在一起。 保证金右：0.13em;
你的李样式应该是这样的：
.tablist li {float：left;保证金右：0.13em; }
使用CSS 3使选项卡看起来像选项卡
为了完成此样式表中的大部分繁重工作，我们将目标锁定在无序列表中。浏览器认识到链接在网页上比其他标记更多，因此如果将它们附加到锚标记（链接），则更容易让旧版浏览器遵守悬停状态等内容。首先编写你的样式属性：
.tablist li a {} .tablist li a：hover {}
因为这些选项卡应该像应用程序中的选项卡一样，所以您希望选项卡的整个区域都是可点击的，而不仅仅是链接的文本。为此，您必须将A标记从其正常的“内联”状态转换为块元素。 显示：块; （如果您有兴趣了解有关差异的更多信息，请阅读Block-Level与Inline Elements。）
然后，一种简单的方法来强制您的标签彼此对称，但仍然弯曲以适应文本的宽度是使右侧和左侧填充相同。我们使用padding速记属性将top和bottom设置为0，将right和left设置为1em。 填充：0 1em;
我们还选择删除链接下划线，以便标签看起来不像链接。但如果您的观众可能会对此感到困惑，请忽略这一点。 链接装饰：无;
通过在标签周围放置一个细边框，它们看起来像标签。我们使用边框速记属性将边框放在四边 边界：0.06em solid＃000; 然后使用border-bottom属性将其从底部删除。 底部边框：0;
然后我们对选项卡的字体，颜色和背景颜色进行了一些调整。将这些设置为与您的网站匹配的样式。 字体：粗体0.88em / 2em arial，geneva，helvetica，sans-serif;颜色：＃000;背景色：#CCC;
所有上述样式都应该放在选择器中.tablist li a，规则使它们一般影响锚标签。然后，为了使标签看起来更可点击，您应该添加一些状态规则.tablist li a：悬停.
我们喜欢更改文本和背景的颜色，以便在鼠标悬停时弹出标签。 背景：＃3 CF;颜色：#FFF;
我们在浏览器中添加了另一个提醒，我们希望链接保持不加下划线。 文字修饰：无; 另一种常用方法是将鼠标悬停在选项卡上时重新打开下划线。如果您想这样做，请将其更改为 文字装饰：下划线;
但是CSS 3在哪里？
如果您一直在关注，您可能已经注意到样式表中没有使用任何CSS 3样式。这具有在任何现代浏览器中工作的优势，包括Internet Explorer。但它不会使标签看起来像方框。通过添加CSS 3样式调用border-radius（以及它关联的特定于浏览器的调用），您可以使边缘变圆，看起来更像是马尼拉文件夹上的标签。
你应该添加的样式 .tablist li a 规则是： -webkit-边框右上角半径：0.50em; -webkit-边框左上角的半径：0.50em; -moz-边界半径-topright：0.50em; -moz-边界半径，左上：0.50em;边框右上角半径：0.50em;边框左上角半径：0.50em;
这些是我们写的最终样式规则：
.tablist li a {display：block;填充：0 1em;文字修饰：无;边界：0.06em solid＃000;底部边框：0;字体：粗体0.88em / 2em arial，geneva，helvetica，sans-serif;颜色：＃000;背景色：#CCC; / * CSS 3元素* / webkit-border-top-right-radius：0.50em; -webkit-边框左上角的半径：0.50em; -moz-边界半径-topright：0.50em; -moz-边界半径，左上：0.50em;边框右上角半径：0.50em;边框左上角半径：0.50em; } .tablist li a：hover {background：＃3cf;颜色：#FFF;文字修饰：无; }
使用这些样式，您可以在所有主流浏览器中使用选项卡式菜单，并且在符合CSS 3标准的浏览器中看起来很漂亮。下一页为您提供了另一个选项，您可以使用它来打扮更多。
突出显示当前选项卡
在我们创建的HTML中，UL有一个带ID的列表元素。这允许您为一个LI提供与其余LI不同的样式。最常见的情况是使当前标签以某种方式脱颖而出。另一种想到这一点的方法是，您希望将不活动的选项卡变灰。然后，您可以更改不同页面上ID的位置。
我们同时设置#current A标签和#current A：hover sta的样式，以便两者略有不同。您可以更改颜色，背景颜色，甚至是该元素的高度，宽度和填充。在您的设计中进行任何有意义的更改。
.tablist li＃current a {background-color：＃777;颜色：#fff; } .tablist li＃current a：hover {background：＃39C; }
而且你已经完成了！您刚刚为自己的网站创建了一个标签式菜单。
