蓝色风格头部设计技巧

头部是网页设计中的重要因素，它们可以成就或破坏一个设计。自从 Web 2.0 以来，我们看到了许多设计趋势，其中最具突破性的趋势之一就是**大型**头部。然而，头部始终保持着方方正正的形状。

Blueflavor，一个移动设计网站，打破了这一趋势，采用了我在其他地方从未见过的设计，并且不需要精湛的 CSS 技能即可创建。

如您所见，他们将菜单和内容的开头推入了头部。那么他们是如何做到的呢？

您可以将图像切分成单独的部分，并尝试使用（浮动）div 将它们拼合在一起。但是，这会导致 IE 6、7 和 Firefox 等浏览器之间可能出现差异问题。

最好的方法是保持图像完整。Blue Flavor 使用两列，第一列位于头部较长部分的下方。内容 div 位于头部较短部分的下方。通常，内容 div 会与第一列位于同一级别。要将其向上移动到图像的间隙中，请使用负边距，这会将其向上移动。Blue Flavor 使用margin-top: -20px。

负边距通常不使用，但这是一种简单的方法，可以改变头部的外观和感觉。