使用标题头创建div [英] Create div with title header
本文介绍了使用标题头创建div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我将如何使用纯CSS(没有图像,没有表,没有javascript)创建下面的?
解决方案
HTML:
< div class =box>
< h2> Div标题< / h2>
< p> Div内容。< / p>
< / div>
和CSS:
.box {border:2px solid#0094ff;}
.box h2 {background:#0094ff; color:white; padding:10px;}
.box p {color: #333; padding:10px;}
使用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;
}
上述代码将在firefox,safari,chrome,opera )等
现在有奖励演示
How would i create the below using pure CSS (no images, no tables, no javascript)?
解决方案
HTML:
<div class="box">
<h2>Div Title</h2>
<p>Div content.</p>
</div>
and the 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
.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
Now with bonus demo
这篇关于使用标题头创建div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文