html - 如何使 div 看起来像没有任何选项卡功能的选项卡式 Pane ？

Question

我有一个带有一些可爱圆 Angular 的矩形 div。这是它的外观；

但是，我应该做的是，将页眉放在一个选项卡中，但它不会被点击。只是外观。这才是它应该的样子

有没有简单的方法来做到这一点？还是我应该将背景设为图像？ div 和标题是具有高度、宽度等的典型 div。标题只有图像。我真的可以使用一些建议。我很想在它的 CSS 方面获得一些帮助。它是 Openx，所以我很难理解元素中的每一行代码。我对此很陌生。

Answer 1

它完全可以在没有 javascript 的情况下完成，只需要普通的旧 css..

如果你有标记

 <div id="stuff">
     <h1>title</h1>
     Lorem ispum dolor sit amet
 </div>

(我有一个 <h1> ，但在您的情况下，它将是一个图像。除此之外应该没有区别)

然后像下面这样的 css 应该可以解决问题:

 #stuff {
     margin: 100px;
     position:relative;
     background-color: silver;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 0px;
     -moz-border-radius-bottomright: 30px;
     -moz-border-radius-bottomleft: 30px;
     -webkit-border-radius: 30px 0px 30px 30px;
     border-radius: 30px 0px 30px 30px;
     padding: 30px;
 }

 #stuff h1 {
     position: absolute;
     top: -40px;
     height: 40px;
     right: 0px;
     left: 50%;
     background-color: silver;
     padding: 10px;
     -moz-border-radius-topleft: 30px;
     -moz-border-radius-topright: 0;
     border-radius: 30px 0 0 0;
 }

您可以在此处查看工作示例:http://jsfiddle.net/4RPhu/

基本上，您是在设计 div 的样式，然后将“Tab”相对于 div 绝对定位，顶部值为负，以便它突出，然后简单地放在左侧。只需根据您的需要调整值即可。