新闻资讯

几个星期前，我贴的展示网页设计与巧妙的标题效果。在这种综合报道，我们看到了一堆网站利用一个简单的倒塌头效果，在页眉或横幅将逐渐缩短，消失在页面滚动的。让我们来看看重新在自己的网站设计中使用这个凉爽的效果。

 

 

 

 

崩溃的头效果实际上是用CSS的只是几个简单的线条创建。所有它需要的是几个位置：固定;你的头和横幅元素的声明，那么调整的z-index值，以允许内容滚动过顶，给人的印象是旗帜，是崩溃当用户滚动。

 

查看倒塌头效果演示

 

 

 

为了营造效果，首先需要一个基本的布局包含至少一个头和一个内容区域。在这个例子中，我们将创建沿着页面的顶部薄薄的标题栏，它会留在固定的地方，永远保持可见。在此，我们将有一个横幅，将采取崩溃效果，最后主要内容的div。

 

查看基本倒塌头效果演示

 

header {
height: 100px;
background: #bdbdbd;
position: fixed;
width: 100%;
z-index: 10;
}

我们将开始与CSS来给它的固定定位头。这些效应工作时，最好设计横跨整个页面，所以100％的宽度被首先加入。固定定位是那么简单的实现位置：固定;声明，这将防止从元素与页面的其余部分滚动，而是留在停泊的地方。为了确保这方面做头下方滚动流量页面内容的其余部分，我们给它一个高的z-index的值10。

 

#banner {
width: 100%;
height: 300px;
position: fixed;
top: 100px;
background: #707070;
}

布局的下一部分是横幅格，这是将要给出的崩溃效果的区域。该元素将需要固定的地方与位置：固定;声明，但而不是被固定在页面的顶部被设置100px的从顶部直接坐头下方。

 

#content {
width: 100%;
position: relative;
top: 400px;
background: #ebebeb;
height: 1500px; /* Demo purposes */
}

 

最后，内容的div的样式了，完成的效果。前两个元素都固定的地方，所以这个内容的div需要相对定位，以便从顶部指定正确的距离，以允许它继续页面流和栈本身的前两个元素下。默认情况下，内容区域具有较高的z-index值大于旗帜，因为该元素是不固定的它会向右滚动在旗帜的顶部。当它不过到达头，头高的z-index值可以确保这个元素仍保留在上面，从而导致流动下面的内容吧。

 

 

一旦这些核心价值的定位是到位的布局可以称呼了各种声明让事情看起来有点漂亮。在这里，我添加了一个照片的背景（礼貌Flickr用户的凯文·杜利），设置为background-size: cover; ，使其充满整个页面，并添加了一些简单的文本内容。