Question

如何使用标签（即标签'主动'，'特色'，'热'，'周'，'月'）使用html和css实现这种效果？我试过复制CSS但它没有用。任何人都可以帮助或引导我这样的教程吗？谢谢！

Answer 1

这就是你需要的：

5个div，带.tab类。
.tab-container，容器div的css类，需要一个botoom边框，这将包含标签。
.tab css类，包含基本块功能，一些color:，padding:和margin:，还需要float: left，所以所有div都包含<a> class浮动到容器的左边。
.active css类，如果你愿意，可以有左边，上边和右边框，也许还有一些不同的颜色。
因为.tab元素将是链接，默认情况下inline元素为display: block，您还需要为.tab指定a.tab css。

现在布局：

容器div.tab-container
孩子{{1}}元素。

请尝试使用此处：http://jsfiddle.net/点击保存并使用您保存的链接进行评论，或使用您根据上述迷你教程编写的css / html编辑问题。

Answer 2

我更愿意在ul容器内li和div制作标签#tabcontainer

在你的CSS中你会有一些：

CSS：

#tabcontainer ul li {
 // properties to items
}

#tabcontainer ul li a {
 // properties for links
}

#tabcontainer ul li a:hover {
 // properties for hover links
}

#tabcontainer ul li .active {
 // properties for active item
}

HTML：

<div id="tabcontainer">
      <ul>
          <li class="active"><a id="item" href="#">Link 1</a></li>
          <li><a id="item" href="#">Link 2</a></li>
          <li><a id="item" href="#">Link 3</a></li>
          <li><a id="item" href="#">Link 4</a></li>
      </ul>
</div>

在服务器端语言的li标记中，您将设置一个链接已处于活动状态的变量，因为当您点击{{1}时，地址栏中的地址会更改为?tab=hot }

如何使标签与stackoverflow中的标签一样

2 个答案:

CSS：

HTML：