关于全屏布局(header)那点事:
之所以前面括号里面写了个header,但全屏并不局限于它。
接下来让我们,讨论一下关于全屏布局的那点事-----首先全拼的话就要考虑到不能固定宽高度了,这里拿header做例子。
所有我们只考虑不固定宽度就好了。
首先:分为两种 第一种:给一个很大的固定尺寸的图片背景
第二种:无上限的背景颜色
第二种方法:我们不用考虑太多 直接 100%; height:300px; background:red; 这样子就可以建立一个全屏的 颜色为
红色的背景的布局了。
第一种方法:这个就要看需求了,截止目前 24寸显示器 还不是很普遍,视乎也是最大的用户用的尺寸。所以很多布局最大做到1900PX,
但今天看了一下,天猫的(他们用的是1600px):说这么多,实际上就是让我们统计大概的了解一下,目前适应用户屏幕大小做出
相应需求。 这里面 我们和第一种方法的用法几乎没有太大区别
100%; height:300px; backrgound:url(../images/**.jpg) no-repeat; 这样子, 屏幕就只会根据用户的屏幕显示大小,来相应的显示背景图片的大小了。
当然个人建议:自动适应就好了,反正我们用的是 居中 margin:0 auto;
但我们更多见到的布局是这样子的:
因为我们的网站都是有宽度限制的,所有通常的做法是要限制住(目前个人感觉没有这个必要,但既然要讲这里那就扯扯吧)
那么我们的做法就是在全屏布局的里面在加入一个div,这个div是宽度定死的,别且也加一个 margin:0 atuo;
(这里多讲一下,很多都加一个min-width这个其实真没有什么必要,应为IE6 根本就不识别这个【唯一有用的就是告诉用户,小子我这个不能太小,最小也得是1000px宽的。】)
那么这个时候,通常是喜欢给外围的加一个相对定位:这里是对第二个div加相对定位。第二个里面的元素加绝对定位。
其实有的时候我想为什么一定都这么写呢?就算你不加相对定位,也不会跑别的地方的,你之前已经有的 margin:0 atuo;
当然加定位还是有好处的,至少定位方便很多。 IE6下对 边距的敏感度很强,所有有的时候用定位,远比边距来的额实在。