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