仓酷云

标题: 给大家带来CSS实例教程:弹性+固宽结构 [打印本页]

作者: 透明 时间: 2015-1-15 23:56
标题: 给大家带来CSS实例教程:弹性+固宽结构
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
网页制造poluoluo文章简介：这里所说有弹性，指的是背景往自顺应屏幕宽度，而固宽呢，则是让注释内容不管在宽屏仍是窄屏中都能主动居中。
在现今用户的显现器愈来愈年夜的明天，之前的1024*768固宽结构有点愈来愈不达时宜，对年夜屏幕的用户而言，两侧空空的留白给人第一眼的印象是严峻的屏幕华侈，作为网页计划师的你有义务给这一批用户一个优秀的用户界面。

固然为了削减这类屏幕的华侈，接纳弹性流体结构是最好的办理计划，它能够充实使用屏幕空间，不管你是多年夜分辨率的用户，都能恣意满屏展现内容。但是由于各种限定，今朝的网页完整接纳流体弹性结构前提还不具有(出格是扫瞄器厂商对尺度的肆意践踏和CSS尺度的不完整撑持等等)。作为夹在用户和厂商的两头者，我们只能以一种兼容的心态往顺应二者的差异。以是，作为一种过渡的办理计划，有了如许一种结构：弹性+固宽结构。

这里所说有弹性，指的是背景往自顺应屏幕宽度，而固宽呢，则是让注释内容不管在宽屏仍是窄屏中都能主动居中。夹缝中求保存，以满意分歧巨细分辨率用户的必要。以下图所示的计划就是一个典范的样例。

图一

空话少说，言回正传，我们就来制造一个如许的结构布局：

起首构建布局层：

<divid="wrapper">
<divid="main"class="clearfix">
<divid="header">
<divid="inheader"></div>
</div>
<divid="content"></div>
</div>
</div>
<divid="footer">
<divid="infoot"></div>
</div>

剖析一下布局层，一个网页一样平常包含页头，内容区和页脚三年夜部分，我们将页头和内容放在一个容器层，取名为wrapper，而将页脚自力出来，取名为footer，为何要如许计划，我们想让这个页脚在内容区不满一屏的情形下也是相对居底的。

我们将wrapper和footer这两个容器设置100%的宽度，让它主动顺应屏幕的宽度。而且也将header页头地区也设置成100%宽度。如许我们能够在页头和页脚中拔出一张能够程度平展的图片，使页头和页脚的背景在年夜屏幕下能程度充斥全部屏幕空间。

作为注释内容，我们一样平常的做法是，当分辨率变年夜，让它居中显现，两侧留出空缺。由于页头地区已设置为100%宽度，以是我们在header中再增加一个容器层inheader，它来作为真实的页头笔墨内容的载体，我们再给它设置一个流动的宽度值，好比是960像素宽，然后让它主动居中。

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

如许页头的注释浮动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:0auto;background:#CC9933;}
h3{font-size:14px;line-height:50px;}
#inheaderp{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:0auto;background:#CC9966;}
#footerp{line-height:26px;}
#content{background:#999;width:960px;margin:0auto;height:692px;}
#contentp{line-height:30px;padding:030px;color:#fff;}
/*申明:必要注重的就是#main的padding值、footer的高度和负margin值，必要坚持分歧。上面是出名的全能float闭合ClearfixHack*/
.clearfix:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;}
.clearfix{display:inline-block;}
/*HidesfromIE-mac*/
*html.clearfix{height:1%;}
.clearfix{display:block;}
/*EndhidefromIE-mac*/
测试demo:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>弹性+固宽结构计划</title><linkhref="css/main.css"rel="stylesheet"type="text/css"/><styletype="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:0auto;background:#CC9933;}h3{font-size:14px;line-height:50px;}#inheaderp{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:0auto;background:#CC9966;}#footerp{line-height:26px;}#content{background:#999;width:960px;margin:0auto;height:692px;}#contentp{line-height:30px;padding:030px;color:#fff;}/*申明:必要注重的就是#main的padding值、footer的高度和负margin值，必要坚持分歧。上面是出名的全能float闭合ClearfixHack*/.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/*HidesfromIE-mac*/*html.clearfix{height:1%;}.clearfix{display:block;}/*EndhidefromIE-mac*/</style></head><body><divid="wrapper"><divid="main"class="clearfix"><divid="header"><divid="inheader"><h3>弹性+固宽结构计划（合适宽屏和年夜背景结构）</h3><p>页头背景可平展全部扫瞄器宽度，而注释内容则一直居中显现，不论分辨率是多年夜。</p></div></div><divid="content"><p></p><p>注释内容背景可平展全部扫瞄器宽度，你能够在body中到场一张超年夜的背景图片，并设置图片为居中。而注释内容则一直居中显现，不论分辨率是多年夜。当你分辨率凌驾1024时，在注释内容的两侧会呈现图片，使宽屏的内容区两侧不显无暇洞。</p></div></div></div><divid="footer"><divid="infoot"><p>我是浮动的一直流动在底部的DIV,不管两头的笔墨内容高度是不是不敷一屏，我仍是能居底显现，</p><p>傍边间内容凌驾一屏时，我又能够向下浮动哟</p></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。

作者: 海妖 时间: 2015-1-17 23:50
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: 简单生活 时间: 2015-1-24 15:27
这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

作者: 谁可相欹 时间: 2015-2-1 23:36
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 若相依 时间: 2015-2-22 22:07
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

作者: 若天明 时间: 2015-3-7 05:16
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 飘飘悠悠 时间: 2015-3-14 14:39
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 再见西城 时间: 2015-3-21 11:49
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

欢迎光临仓酷云 (http://ckuyun.com/)