CSS 标签页

标签页不一定是水平的，但它们通常是。所以我们的第一步将是创建一个水平列表。

我们将尝试用 CSS 做一些不同的事情，但我们会坚持使用以下基本 HTML 结构

<header> 

<h1>Tabs</h1>
<nav>
    <ul>
        <li><a href="this.html">This</a></li>
        <li id="selected"><a href="that.html">That</a></li>
        <li><a href="theOther.html">The Other</a></li>
        <li><a href="banana.html">Banana</a></li>
    </ul>
</nav>

</header>

<section id="content">
    <p><!-- Big lovely oodles of content --></p>
<section>

现在，我们希望用这个 HTML 做的是将每个列表项变成一个标签页，选中的项看起来像是对应内容区域的一部分。

首先，我们可以去掉列表项标记，并将 ul 元素的边距和内边距设置为零。

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

现在让我们开始吧……

内联列表项

我们可以做的最明显的第一个事情是让列表水平。最直接的解决方案是将 li 元素创建的框的 display 属性设置为 inline（内联）。

nav li {
    display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 5px 0 0;
}

这个规则集还通过在除底部外的所有侧面应用 border（边框）来开始让这些项更像标签页。这里的 margin 属性将除了右侧以外的所有边距归零，因为我们要稍微拉开标签页之间的距离。

现在我们可以通过内联 a 元素框的 padding（内边距）来让事情更整洁一些。

nav li a {
    padding: 0 10px;
}

到目前为止，标签页还没有“坐在”任何东西上，所以我们可以给内容 section 添加一个边框。

#content {
    border: 1px solid;
}

但还有一件至关重要的事情缺失了。现状是，标签页只是坐在内容框的顶部，看起来都差不多。我们需要做的是让“活动”的标签页——与我们正在浏览的页面相关的那个——看起来像是内容框的一部分，就像分割卡片的一侧上的标签页一样。

由于内联框中的垂直内边距实际上不会将任何东西推开，我们可以简单地这样做

#selected {
    padding-bottom: 1px; 
    background: white;
}

这会将带有“selected”（选中）ID 的 li 元素框的底部填充一像素，将其推到内容框的顶部边框之上。由于背景颜色是白色（假设内容框的背景颜色也是白色），它会产生一种错觉，即标签页及其边框是内容框的一部分。

浮动列表项

到目前为止，这种技术对于基本标签页来说非常棒。颜色、边框颜色、文本装饰等都可以根据需要进行更改。但是，当涉及到内边距时，事情就会变得混乱。正是因为“选中的”标签页通过溢出到内容框上来工作，所以无法为初始标签页状态应用内边距。它们就是不会按预期工作。

所以，如果我们想让标签页变得更酷一些，我们需要用另一种方式使列表项水平排列。

#header li {
    float: left;
    border: 1px solid;
    border-bottom-width: 0;
    margin: 0 5px 0 0;
}

这与之前一样，只不过我们不是将 li 元素框内联显示，而是将它们浮动到左边。

这样做会破坏其他地方的一些东西，所以在我们继续之前，我们需要清除内容框中浮动的邪恶影响，然后我们需要清除列表上方可能存在的任何边距。

#content {
    border: 1px solid;
    clear: both;
}

h1 {
    margin: 0;
    padding: 0 0 10px 0;
}

我们用这种方法已经接近完成了，但不是像内联列表项方法那样将内边距应用于选中的列表项（这里它只会拉伸内容，因为浮动框具有“block”显示类型），而是我们要将整个东西向上移动一像素然后向下放。

#selected {
    position: relative;
    top: 1px;
    background: white;
}

所以现在 事情看起来和内联方法差不多。一个小区别是选中的标签页比其他标签页低一像素，因为它被推下来覆盖了底部的线条。为了避免这种情况，你可以将最后的声明块与定位和背景颜色应用于列表项内的链接（#selected a），而不是列表项本身（#selected），这可以达到更理想的效果。

让事情看起来更好看……

我们可以做一些小事情来让这些标签页看起来更好，例如去除下划线、为边框提供不同的颜色、在悬停时更改背景颜色等，这些都可以使标签页更易辨认，“活动”标签页更明显。

玩转一下

当然，标签页不必像上面的示例那样边框很多。主要原则保持不变——你设置你的水平列表项，然后按你喜欢的方式进行样式设计。

你可以通过使用纯色背景来分隔标签页。或者，一个由 Dan Cederholm 创造的简单技巧是操纵列表项的底部边框，以产生细长的突出标签页。

而且标签页不一定非得是方形的 90 度角。将 border-radius 应用于每个标签页的左上角和右上角，将使它们更像我们想要模仿的那种分割卡片。