html - 如何使选项卡就像 stackoverflow 中的一样

Question

我如何仅使用 html 和 css 通过选项卡(即选项卡式“事件”、“精选”、“热门”、“周”、“月”)实现这种效果？我尝试复制 css，但没有用。任何人都可以像这样帮助或引导我学习教程吗？谢谢!

Answer 1

这是你需要的:

• 5 个 div，带有 .tab 类。
• .tab-container，容器 div 的 css 类，需要底部边框，这将包含标签。
• .tab css 类，包含基本 block 功能，一些 color: , padding: , 和 margin: , 还需要 float: left , 因此所有具有该类的 div 都 float 到容器的左侧。
• .active css 类，具有左、上和右边框，如果需要，可能还有一些不同的颜色。
• 因为 .tab 元素将是链接，并且 <a>元素是 inline默认情况下，您需要指定 display: block .tab 的 CSS

现在的布局:

• 一个容器 div.tab-container
• child a.tab元素。

在这里试试:http://jsfiddle.net/单击保存并使用您保存的链接发表评论，或者使用您根据上面的迷你教程编写的 css/html 编辑您的问题。