css - 使用 css，在标题下方添加副标题

Question

我正在尝试在页面标题下方添加副标题。我在现有标题的左侧有一张图片，标题位于图片中间。我正在尝试在标题下方添加一个较小字体的副标题，但我似乎无法弄清楚。我使用的代码是这样的:

<div class="top_bg">
<div class="wrap">
<div class="container">
<img src="images/grin.png" WIDTH="150" ALT="BRT" />
<div class="text">This is the Title</div>
<div class="clear"></div>
</div>  
</div>
</div>


.container {
display:table;
width:100%;
height:auto;
background-color:#171717;
}
.container .text {
display:table-cell;
height:100%;
vertical-align:middle;
font: bold 70px Verdana;
color: #666666;
}

这是它的样子:

(我没有包括菜单的代码，即使它在图片中)。

我想要实现的是:

有没有人有什么想法？

Answer 1

你有一个 div.text其中包含您的标题。在其下方，您需要放置副标题。此代码称为“html 标记”。你应该使用 <h1> - <h6>标题标签。

这是一个例子(fiddle)

.header {
  text-align: center;
}
.header img {
  float: left;
}
.clear {
  clear: both;
}

<div class="header">
  <img src="http://dummyimage.com/100/000000/fff" />
  <h1>Hello world</h1>
  <h2>This is a subtitle</h2>
  <div class="clear"></div>
</div>

预览: