我想创建h1标头作为下面的示例。我在某些网站上看到了这种标题,我现在不记得它的地址了。如果我记得的话,可以从他们的网站复制它。不幸的是我忘了。这是PSD的屏幕截图:
(来源:hizliresim.com)
无论如何,无论如何,我仍然无法获得结果。我得到的是:
(来源:hizliresim.com)
这是我的代码:
div.big-header div.header-left h1 {
float: left;
color: #fff;
background: #c00000;
font: bold 35px "Open Sans";
padding: 1px 5px;
margin-bottom: 35px;
}
这里是JSFiddle
问题:如何创建上面的示例标题(第一张图片)
尝试这样:Demo
更新 Demo
更新:刚刚添加了display:inline,带有box-decoration-break的行高以及您的代码。
CSS:
h1 {
color: #fff;
background: #c00000;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
/* newly added code */
display:inline;
line-height:44px;
-webkit-box-decoration-break: clone;
-ms-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
在span
中使用h1
:
h1 {
float: left;
color: #fff;
font: bold 35px sans-serif;
padding: 1px 5px;
margin-bottom: 35px;
}
h1 > span {
background: #c00000;
}
和:
<h1><span>How to create a page with PHP?</span></h1>