我有一个带有一些可爱圆 Angular 的矩形 div。这是它的外观;
但是,我应该做的是,将页眉放在一个选项卡中,但它不会被点击。只是外观。这才是它应该的样子
有没有简单的方法来做到这一点?还是我应该将背景设为图像? div 和标题是具有高度、宽度等的典型 div。标题只有图像。我真的可以使用一些建议。我很想在它的 CSS 方面获得一些帮助。它是 Openx,所以我很难理解元素中的每一行代码。我对此很陌生。
最佳答案
它完全可以在没有 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 绝对定位,顶部值为负,以便它突出,然后简单地放在左侧。只需根据您的需要调整值即可。
关于html - 如何使 div 看起来像没有任何选项卡功能的选项卡式 Pane ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9207292/