创建灵活性的页头

对于一行就能显示完的标题，在一定的文字大小下，有些设计方案的显示效果确实不错。可是当标题变得长一些之后，固定高度的页头设计就不再适用，因为这时较长的标题会超出背景，显得很难看并难以阅读。

所以，能够适应任何数量的文本内容是一个优秀的、可重用模板的重要特性。这里的使用的方法是，利用css巧妙地设定两幅背景图片。

html代码

<header role="banner">
    <h1>Sample Blog</h1>
</header>

创建两幅背景图片

1. 第一幅比预想的高度高一些，这幅图片会依照标题文字的长度显示或多或少的部分。
2. 第二幅图片会作为页头的底边，这幅图总会出现在标题文字的下方。

css

header[role="banner']{
    margin:0;
    padding:0;
    font-family:"Lucida Grande","Trebuchet MS";
    background:#E0E0E0 url(img/topdiv.gif) no-repeat top left;
}
header[role="banner"] h1{
    margin:0;
    padding:45px 60px 50px 160px;
    font-size:200%;
    color:#FFF;
    background:url(img/toph1.gif) no-repeat bottom left;
}

因为header的显示高度取决于它包含的内容量，所以只有一部分背景会显示出来。

以上css实现的效果便是：

• 当标题文字变长后，topdiv.gif露出了更多部分，toph1.gif的位置自动下移，总是保持在标题文字的下面。
• 反过来也一样。如果标题文字只有一行，并且站长决定使用很小的字体，那么页头就会随之缩小。

有了上面的代码，我们便会拥有一个漂亮的页头，并且可以适应各种未知的变化。