我怎么能得到像这样的Tab布局

Question

所以我想弄清楚如何最好地实现像http://reversl.net/tests/这样的Tab布局，但我不确定正确的方法来接近它。最初我想到在添加背景颜色和填充之前创建UL并浮动列表项以创建大背景。但我不确定如何实现文本布局（小文本上的大数字）

我也希望活动标签有一个指针（如图所示），这让我想到也许不是UL我应该漂浮3次潜水并使每个人成为一个链接。但是我认为这种方法不是很语义。现在我很困惑： - /任何提示？

Answer 1

提供的链接只是一张图片。

试试这个tabs with css

Answer 2

您可以尝试以下HTML：

<ul id="tabs">
    <li>01</li>
    <li>02</li>
    <li>03</li>
</ul>

和CSS：

#tabs li:after {
    content: " tab";
    font-size: ...;
}

根据需要添加其他元素。

Answer 3

这使用了一个'after'元素作为'active'指标，如果你想让它在糟糕的浏览器中工作，它将需要一个shiv或完全改变，但它非常接近图像：

http://jsfiddle.net/BzSVL/

对于上面较大的文字，我认为你会得到的最大语义是em还是强，因为它是链接文本的一个重点部分？