快速业务通道

CSS实例教程:弹性+固宽布局

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-03-02
能水平充满整个屏幕空间。

作为正文内容,我们一般的做法是,当分辩率变大,让它居中显示,两侧留出空白。因为页头区域已经设置为100%宽度,所以我们在header中再添加一个容器层inheader,它来作为真正的页头文字内容的载体,我们再给它设置一个固定的宽度值,比如是960像素宽,然后让它自动居中。

#inheader{width:960px;height:110px; margin:0 auto; }

这样页头的正文浮动haeader的上层,这两个层可以设置不同的背景图片,形成一个叠加的页头效果,它能自动适应更大的屏幕分辩率。

同样的道理,页脚也可以采用这种方法来实现。

在上面的结构层,我在中间内容区没有采用这种方法,而是做了一点变通,我们可以看到在content这个内容区中,没有内嵌一个容器,而只有一个容器。如果我们为了让正文内容的两侧在大分辩率下两侧不显得太空洞,该怎么办呢,当然你可以采用页头和页脚的做法,在它的内容再加一个div。当然为了减少嵌套,我们可以采用变通的办法。我们可以将一张超大的图片加在body中背景中,并用background-position来定位居中显示这张图片,这样在内容区两侧的图片就显示出来了。

本博客就是一个具体案例,在大分辩率下看看本博客两侧图片,然后缩小窗口,就可以看到两侧图片在1024*768时只显示了一小块,而正文内容始终居中显示的。

为了演示效果,我们加入一些其它颜色调置,最后的样式如下所示: 

*{margin:0;padding:0;}
html, body, #wrapper 
{height: 100%;font-size:12px;}
#wrapper
{width:100%;background:#777;}
body > #wrapper 
{height:auto; min-height:100%;}
#main 
{padding-bottom: 54px;min-width:960px;}/* 必须使用和footer相同的高度,最小宽度ie6中加JS解决 */
#header
{text-align:center;color:#fff;background:#333;}
#inheader
{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}
h3
{font-size:14px;line-height:50px;}
#inheader p
{font-size:12px;line-height:30px;}
#footer 
{
    position
: relative;
    margin-top
: -54px; /* footer高度的负值 */
    height
: 54px;/* footer高度*/    
    width
:100%;
    min-width
:960px;/*最小宽度ie6中加JS解决*/
    clear
:both;
    background
:#666;
    text-align
:center;
    color
:#fff;
}
#infoot
{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}
#footer p
{line-height:26px;}
#content
{background:#999;width:960px;margin:0 auto;height:692px;}
#content p
{line-height:30px;padding:0 30px;color:#fff;}
/*说明: 需要注意的就是#main的padding值、footer的高度和负margin值,需要保持一致。下面是著名的万能float闭合Clearfix Hack*/
.clearfix:after 
{
content
: ".";
display
: block;
height
: 0;
clear
: both;
visibility
: hidden;}
.clearfix 
{display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix 
{ height: 1%;}
.clearfix 
{display: block;}
/* End hide from IE-mac */    

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号