asp.net-mvc - 如何更改部分句子的格式？

Question

在我看来有这样一行:

<div class="contact">
 <h6>@Model.Salutation</h6><h3>@Model.FirstName @Model.LastName</h3>
</div>

我正在努力实现 Mr Tommy Jones，而 Mr 则采用不同的格式。

如下图:

.contact h3 {
    font-size: 1.1em;
}

.contact h6 {
    font-size: 0.85em;
    color: gray; 
}

但是我在 Mr 和 rest 之间换行，我该怎么办？

Answer 1

您有 h6 标签，后跟 h3 标签。我在想...这是真正的标题文本吗？您使用标签是因为格式而不是意义吗？

试着写:

<div class="contact">
 <span class="title">@Model.Salutation</span><span class="name">@Model.FirstName @Model.LastName</span>
</div>

使用以下 CSS(更新以匹配所需的格式):

.contact .title
{
 font-size: 0.85em;
 color: gray;
}

.contact .name
{
 font-size: 0.85em;
 font-weight: bold;
}

如果您使用的是 HTML 5 标签，您可以包含 microdata信息并使用不同的标签。看这个例子(刚刚用微数据更新):

<div class="contact" itemscope itemtype="http://schema.org/Person">
 <span itemprop="title">@Model.Salutation</span>
 <span itemprop="name">@Model.FirstName @Model.LastName</span>
</div>

您的 CSS 可能会更改为:

div[itemtype="http://schema.org/Person"] > span[itemprop="title"]
{
 font-size: 0.85em;
 color: gray;
}

div[itemtype="http://schema.org/Person"] > span[itemprop="name"]
{
 font-size: 0.85em;
 font-weight: bold;
}