网站DIV+css弹性+固宽布局案例
2011-10-21 01:00
537 查看
当今用户的显示器越来越大的今天,之前的1024*768固宽布局有点越来越不合时宜,对大屏幕的用户而言,两侧空空的留白给人第一眼的印象是严重的屏幕浪费,作为网页设计师的你有责任给这一批用户一个良好的用户界面。
当然为了减少这种屏幕的浪费,采用弹性流体布局是最好的解决方案,它可以充分利用屏幕空间,无论你是多大分辩率的用户,都能尽情满屏展示内容。然而因为种种限制,目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意蹂躏以及CSS标准的不完全支持等等)。作为夹在用户和厂商的中间者,我们只能以一种兼容的心态去适应两者的差距。所以,作为一种过渡的解决方案,有了这样一种布局:弹性+固宽布局。
这里所说有弹性,指的是背景去自适应屏幕宽度,而固宽呢,则是让正文内容无论在宽屏还是窄屏中都能自动居中。夹缝中求生存,以满足不同大小分辩率用户的需要。如下图所示的设计就是一个典型的样例。
废话少说,言归正传,我们就来制作一个这样的布局结构:
首先构建结构层:
<div id="wrapper">
<div id="main" class="clearfix">
<div id="header">
<div id="inheader"></div>
</div>
<div id="content"></div>
</div>
</div>
<div id="footer">
<div id="infoot"></div>
</div>
分析一下结构层,一个网页一般包括页头,内容区和页脚三大部分,我们将页头和内容放在一个容器层,取名为wrapper,而将页脚独立出来,取名为footer,为什么要这样设计,我们想让这个页脚在内容区不满一屏的情况下也是绝对居底的。其具体的实现原理可以参考这篇文章:《CSS Sticky Footer: 完美的CSS绝对底部》。
我们将wrapper和footer这两个容器设置100%的宽度,让它自动适应屏幕的宽度。并且也将header页头区域也设置成100%宽度。这样我们可以在页头和页脚中插入一张可以水平平铺的图片,使页头和页脚的背景在大屏幕下能水平充满整个屏幕空间。
作为正文内容,我们一般的做法是,当分辩率变大,让它居中显示,两侧留出空白。因为页头区域已经设置为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 */
测试demo:
当然为了减少这种屏幕的浪费,采用弹性流体布局是最好的解决方案,它可以充分利用屏幕空间,无论你是多大分辩率的用户,都能尽情满屏展示内容。然而因为种种限制,目前的网页完全采用流体弹性布局条件还不具备(特别是浏览器厂商对标准的肆意蹂躏以及CSS标准的不完全支持等等)。作为夹在用户和厂商的中间者,我们只能以一种兼容的心态去适应两者的差距。所以,作为一种过渡的解决方案,有了这样一种布局:弹性+固宽布局。
这里所说有弹性,指的是背景去自适应屏幕宽度,而固宽呢,则是让正文内容无论在宽屏还是窄屏中都能自动居中。夹缝中求生存,以满足不同大小分辩率用户的需要。如下图所示的设计就是一个典型的样例。
废话少说,言归正传,我们就来制作一个这样的布局结构:
首先构建结构层:
<div id="wrapper">
<div id="main" class="clearfix">
<div id="header">
<div id="inheader"></div>
</div>
<div id="content"></div>
</div>
</div>
<div id="footer">
<div id="infoot"></div>
</div>
分析一下结构层,一个网页一般包括页头,内容区和页脚三大部分,我们将页头和内容放在一个容器层,取名为wrapper,而将页脚独立出来,取名为footer,为什么要这样设计,我们想让这个页脚在内容区不满一屏的情况下也是绝对居底的。其具体的实现原理可以参考这篇文章:《CSS Sticky Footer: 完美的CSS绝对底部》。
我们将wrapper和footer这两个容器设置100%的宽度,让它自动适应屏幕的宽度。并且也将header页头区域也设置成100%宽度。这样我们可以在页头和页脚中插入一张可以水平平铺的图片,使页头和页脚的背景在大屏幕下能水平充满整个屏幕空间。
作为正文内容,我们一般的做法是,当分辩率变大,让它居中显示,两侧留出空白。因为页头区域已经设置为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 */
测试demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹性+固宽布局设计</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /*本例中运用到一个永远固定到页脚的footer容器,这个层是独立于主内容区的.*/ *{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 */ </style> </head> <body> <div id="wrapper"> <div id="main" class="clearfix"> <div id="header"> <div id="inheader"> <h3>弹性+固宽布局设计(适合宽屏和大背景布局)</h3> <p>页头背景可平铺整个浏览器宽度,而正文内容则始终居中显示,不管分辩率是多大。</p> </div> </div> <div id="content"> <p> </p> <p>正文内容背景可平铺整个浏览器宽度,你可以在body中加入一张超大的背景图片,并设置图片为居中。而正文内容则始终居中显示,不管分辩率是多大。当你分辩率超过1024时,在正文内容的两侧会出现图片,使宽屏的内容区两侧不显得空洞。</p> </div> </div> </div> <div id="footer"> <div id="infoot"> <p>我是浮动的始终固定在底部的DIV,无论中间的文字内容高度是否不够一屏,我还是能居底显示,</p> <p>当中间内容超过一屏时,我又可以向下浮动哟</p> </div> </div> </body> </html>
相关文章推荐
- 网站DIV+css弹性+固宽布局案例
- 新手学DIV+CSS商业网站布局从入门到精通(实战案例版) 朱印宏 pdf扫描版
- <div+css页面布局课堂笔记>9---页面布局网站首页设计实例__1
- 《Div+CSS 3.0网页布局案例精粹》扫描版[PDF]
- DIV+CSS网页布局及网站设计常犯错误
- DIV+CSS网站布局最重要的几个东西
- DIV+CSS来布局网站
- Div+CSS网页布局对网站搜索引擎优化的影响
- Div+CSS布局 网站设计的优点!
- Div+CSS布局 网站设计的优点!
- 使用DIV+CSS布局网站的优点和缺陷分析
- DIV+CSS布局的网页对网站优化的影响
- DIV+CSS网页布局及网站设计常犯错误
- 一个简单的网站布局(div+CSS)
- [div+css]网站布局实例二
- DIV+CSS布局的网站对网站SEO的影响分析
- css+div布局案例
- 金典 DIV+CSS 3行2列 布局详解--企业网站通用的基本布局详解
- 收藏网站制作常用经典css.div.布局.设计实例打包下载2
- DIV+CSS架构网站的7种版面布局形式