Html 创建带有标题标题的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2551945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create div with title header
提问by n002213f
How would i create the below using pure CSS (no images, no tables, no javascript)? alt text http://img530.imageshack.us/img530/3209/divs.png
我将如何使用纯 CSS（无图像、无表格、无 javascript）创建以下内容？ 替代文字 http://img530.imageshack.us/img530/3209/divs.png
回答by wiifm
HTML:
HTML：
<div class="box">
<h2>Div Title</h2>
<p>Div content.</p>
</div>
and the CSS:
和 CSS：
.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}
Use CSS3 for border radius
使用 CSS3 设置边框半径
.box {
-moz-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-top-left-radius:5px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
The above code will work in firefox, safari, chrome, opera (10.5 +) etc
上面的代码可以在 firefox、safari、chrome、opera (10.5 +) 等中使用
Now with bonus demo
现在有奖金演示
回答by ЯegDwight
HTML:
HTML：
<div class="myDiv">
<h2>Div Title</h2>
<p>Div content.</p>
</div>
CSS:
CSS：
.myDiv {
border:2px solid #0094ff;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;
width:300px;
font-size:12pt; /* or whatever */
}
.myDiv h2 {
padding:4px;
color:#fff;
margin:0;
background-color:#0094ff;
font-size:12pt; /* or whatever */
}
.myDiv p {
padding:4px;
}
Demo.
演示。
回答by Fabian
What you want is not possible unless you dont really care about support in internet explorer.
除非您真的不关心 Internet Explorer 中的支持，否则您想要的是不可能的。
回答by Greg Hluska
As Fabian said, you cannot do exactly what you want within Internet Explorer. If you still decide you want to create that without any images/javascript, I strongly suggest that you use some conditional statements - a surprising number of people still use Internet Explorer and I'm a little worried how that sort of solution would render in IE!
正如 Fabian 所说，您无法在 Internet Explorer 中完全按照自己的意愿行事。如果您仍然决定要在没有任何图像/javascript 的情况下创建它，我强烈建议您使用一些条件语句 - 数量惊人的人仍在使用 Internet Explorer，我有点担心这种解决方案将如何在 IE 中呈现！
Best of luck - this was a really great question!
祝你好运 - 这是一个非常好的问题！
回答by Joyrex
Using wiifm's JS Fiddle demo, I solved an issue when building a calendar and wanted to make the events on the calendar more colorful and dynamic - I wanted to have a DIV as the containing element, along with the H2 for the time of the event, and the internal P tag holding the event text - I had a set of pre-determined colors for the users to select from, and wanted the background of the H2 to have the same color as the border of the containing element, based on which secondary class was assigned to the element. Normally, you'd have to define a background color for the H2, but with this trick, it uses the containing element's background color as a faux background, so it saves having to create a class just for that, and allows the resulting code to be much cleaner. Here's a forked JS Fiddle link of what I did. It also works in IE8!
使用 wiifm 的 JS Fiddle 演示，我在构建日历时解决了一个问题，并希望使日历上的事件更加丰富多彩和动态 - 我想要一个 DIV 作为包含元素，以及事件发生时间的 H2，以及保存事件文本的内部 P 标签 - 我有一组预先确定的颜色供用户选择，并希望 H2 的背景与包含元素的边框具有相同的颜色，基于哪个辅助类被分配给元素。通常，您必须为 H2 定义背景颜色，但使用此技巧，它使用包含元素的背景颜色作为人造背景，因此无需为此创建一个类，并允许生成的代码要干净得多。这是我所做的分叉 JS Fiddle 链接。它也适用于 IE8！
Just wanted to share since this helped me get to my solution.
只是想分享，因为这帮助我找到了我的解决方案。
