blocks|key|1533357|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533358|<div+class="box">
++++<h2>Div+Title</h2>
++++<p>Div+content.</p>
</div>|code-block|syntax|javascript|1533359|和CSS：|1533360|.box+{border:2px+solid+#0094ff;}
.box+h2+{background:#0094ff;color:white;padding:10px;}
.box+p+{color:#333;padding:10px;}|1533361|使用CSS3作为边界半径|1533362|.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;
}|1533363|上面的代码可以在firefox，safari，chrome，opera+(10.5+%2B)等浏览器中运行|1533364|现在有了bonus+demo|offset|length|1533365|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/exrXR/^0|0|0|0|0|0|0|0|A|4|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>HTML:</p>

<pre><code>&lt;div class="box"&gt;
    &lt;h2&gt;Div Title&lt;/h2&gt;
    &lt;p&gt;Div content.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>and the CSS:</p>

<pre><code>.box {border:2px solid #0094ff;}
.box h2 {background:#0094ff;color:white;padding:10px;}
.box p {color:#333;padding:10px;}
</code></pre>

<p>Use CSS3 for border radius</p>

<pre><code>.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;
}
</code></pre>

<p>The above code will work in firefox, safari, chrome, opera (10.5 +) etc</p>

<p>Now with bonus <a href="http://jsfiddle.net/exrXR/" rel="noreferrer">demo</a></p>


blocks|key|1533394|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1533395|<div+class="myDiv">
++<h2>Div+Title</h2>
++<p>Div+content.</p>
</div>|code-block|syntax|javascript|1533396|CSS：|1533397|.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;+
}|1533398|Demo。|offset|length|1533399|entityMap|0|LINK|mutability|MUTABLE|url|http://www.absint.com/test-2551945.html^0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>HTML:</p>

<pre><code>&lt;div class="myDiv"&gt;
  &lt;h2&gt;Div Title&lt;/h2&gt;
  &lt;p&gt;Div content.&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.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; 
}
</code></pre>

<p><a href="http://www.absint.com/test-2551945.html" rel="nofollow noreferrer">Demo</a>.</p>


blocks|key|2941855|text|你想要什么是不可能的，除非你真的不关心在internet+explorer中的支持。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2941856|http://www.the-art-of-web.com/css/border-radius/|offset|length|2941857|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>What you want is not possible unless you dont really care about support in internet explorer.</p>

<p><a href="http://www.the-art-of-web.com/css/border-radius/" rel="nofollow noreferrer">http://www.the-art-of-web.com/css/border-radius/</a></p>


blocks|key|286569|text|正如Fabian所说，你不能在Internet+Explorer中做你想做的事情。如果你仍然决定创建没有任何图像/javascript的浏览器，我强烈建议你使用一些条件语句--数量惊人的人仍然在使用Internet+Explorer，我有点担心这种解决方案在IE中会如何呈现！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|286570|祝你好运--这是一个非常棒的问题！|286571|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>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!</p>

<p>Best of luck - this was a really great question!</p>


blocks|key|1030774|text|使用wiifm的JS+Fiddle演示，我解决了构建日历时的一个问题，并希望使日历上的事件更加丰富多彩和动态-我希望有一个DIV作为包含元素，以及事件时间的H2和内部P标记保存事件文本-我有一组预先确定的颜色供用户选择，并希望H2的背景具有与包含元素的边框相同的颜色，这是基于为元素分配的二级类。通常，您必须为H2定义背景色，但使用此技巧时，它使用包含元素的背景色作为假背景，因此无需为此创建类，并允许生成的代码更加整洁。这是我所做的一个分叉的JS+Fiddle链接。它也可以在IE8中工作！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1030775|http://jsfiddle.net/Hsm35/|offset|length|1030776|只是想分享一下，因为这帮助我找到了解决方案。|1030777|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

<p>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!</p>

<p><a href="http://jsfiddle.net/Hsm35/" rel="nofollow">http://jsfiddle.net/Hsm35/</a></p>

<p>Just wanted to share since this helped me get to my solution.</p>


<p>How would i create the below using pure CSS (no images, no tables, no javascript)?
<a href="http://img530.imageshack.us/img530/3209/divs.png">alt text http://img530.imageshack.us/img530/3209/divs.png</a></p>


Create div with title header

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

如何使用纯CSS (无图像、无表格、无javascript)创建以下内容？

问创建带有标题标题的div
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建带有标题标题的divEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问创建带有标题标题的div
EN