使用标题头创建div [英] Create div with title header

问题描述

我将如何使用纯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屋！