布局篇(2)—If you love css …
上篇讲的布局(切割)方法相信大家己经掌握，其特点是用固定宽度(fixed-width)来实现页面内各个元素的显示效果，简单实用，易于掌握。本篇将讲述其他相对高级的布局方法。
布局的分类,根据对元素宽度的定义不同，布局可分为以下几种：
1. 固定宽度(fixed-width)布局：
即上一篇所用到的布局方法，其特点是主要DIV的宽度都是用固定大小的px值定义的，其宽度不随浏览器及字体大小的影响。多以px作为宽度单位。
优点：宽度固定，最为保真地表现作者的设计意图；简单易学。
缺点：它是这几种布局方法中最为“自私”的，因为其不考虑访客的浏览设备及设置。比方说，在1024宽的浏览器表现良好的布局，到了1600以上的宽屏浏览器就显得较为局限，其可能缩于屏幕一侧或是中央。
现状：由于其简单易用，且基本满足大部分访客的需求，仍是主要的布局方法，尤其在大陆。
趋势：随着液晶屏幕的发展和普及，成本的下降，市面上宽屏显示器已经开始大量涌现，尤其在西方发达国家，1600的宽屏显示器渐成主流，所以在800或是1024下显示良好的，使用固定宽度的布局方法已经开始被边缘化。
站点举例：网易 蓝色理想
2. 自适应(liquid)布局：
即根据用户浏览器的宽度，自动调整宽度显示的布局方法。以%作为宽度单位。
优点：自动适应各种屏幕宽度，轻松实现满屏显示。
缺点：如果屏幕过宽，而内容有不多的情况下，文字可能拉伸得很长，影响美观。而当屏幕过窄时，内容又会被压缩得很窄，可读性下降。
我是第一个啊
图片没有做连接（不能点击看大图）
要满屏显示，Header，(Content+Sidebar),Footer的宽度要为100%,高度也要为100%吧
To ant:
感谢你的积极参与和指正。你说的问题已经在文中修改, 请重新看题!
基本上还是按照上次的内容略作修改，主要就是将原来的宽度设置成百分比的形式。别的什么都没有修改，难道就是这样。宽度要为100%？没必要吧，自动适应你填写内容就行了。
html,body{
margin:0;
padding:0;
}
#AllWrap{
width:100%;
margin:0 auto;
}
#Header{
height:100px;
background-color:red;
text-align:center;
}
#MidWrap{
background-color:green;
}
#Content{
float:left;
width:70%;
height:400px;
background-color:#FFF;
}
#Sidebar{
float:left;
width:30%;
height:400px;
background-color:green;
}
#Footer{
clear:both;
background-color:blue;
height:80px;
}
看来我是没有读明白
题目
To 红鼻子：
1. margin:0 auto;是没有必要的。其他的都是符合要求的；
2. 100%是很有必要的，当然你也可以使用90%，然后用margin来填充剩下的10%，但总和都需达到100%；
3. 感谢红鼻子的快速解答，看来以后要出个有点难度的了。
呵呵呵，怎么糊涂了呢，“宽度要为100%？没必要吧，自动适应你填写内容就行了。”—–这个不对，严重的不对。
margin:0 auto;自动居中了，继续上次的内容，忘记修改了
hi~~怎么木有音乐猫的连接了，是不是只做技术类的连接了。。。
发表新文章了，不错，又可以继续学习了。
To chun:
对，现在停止交换友情链接了, 不再做日记类博客链接。抱歉。
body{width:100%;margin:15px auto;padding:0;}
#head{width:100%;background:red;height:80px;}
#sidebar{width:70%;float:right;background:darkgreen;height:400px;}
#content{width:30%;float:left;background:white;height:400px;}
#footer{width:100%;background:blue;height:80px;clear:both;}
To xf5337651:
最好加上代码：
* {margin:0; padding:0;}
以使各个浏览器的margin和padding值均归零。
to 红鼻子:
我用浏览器看了下你的大作，发现sidebar跑到 content的左边去了。不知道我验证的对否~~~
顺便交下作业，但不知底下那块黑是咋实现的，俺刚学没多长时间，是不是再加上一个DIV呢？我在 allwrap上加没啥效果-_-。作业：
*{
margin:0;
padding:0;
}
body{
font-family:Arail,Helvetica,Verdana,Sans-serif;
font-size:62.5%;
color:#666;
background:white;
}
#page-container{
padding:0.8em;
}
#allwrap{
float:left;
}
#header{
background:red;
height:8em;
}
#midwrap{
}
#sidebar{
float:right;
background:green;
width:30%;
height:40em;
}
#content{
background:white;
width:70%;
height:40em;
}
#footer{
clear:both;
background:blue;
height:8em;
}
To Jelly:
1. 红鼻子的答案没有问题，你说的sidebar在左边，可能是因为你在html文件中，将sidebar的DIV置于content之前了；
2. 你的答案还是有一点问题，content没有加float，这样的话content和sidebar是不能并列显示的；
3.底下那块黑并不是加了什么DIV，而是body的背景色#444;
呵呵，谢谢jorux的指正，我的确是在html中先写的sidebar后写的 content，我倒了位置试了试，的确没问题。
在sidebar和 content的顺序上我是学了你译的“十步”的顺序，就像大红鼻子的css适用 content在前一样，我这个CSS是跟html里sidebar在前配合使用的，验证的时候是并列的。
我把你文章中那个图的上和左边的白色当成图的一部分了，眼神不好~~以为大背景是白色的。。。
jorux你的教程对像我这种对网页制作有兴趣又苦于无从学起的银帮助很大。文章都是精品，感激你的劳动，支持你！祝你一切顺利：）
请教个问题：
body.FullWidth #Head #ChannelMenu
{width:100%;}
这个是淘宝的样式表，可我在查看源文件时并没发出淘宝引用了FullWidth这个样式，难道不用定义.FullWidth这个样式吗？那它是起什么作用的呢？
谢谢。。。
To Xf5337651:
可以看看《十步》里的第九步后半部分，body.FullWidth是用来控制在body标签下class=”FullWidth”的html文件的。你看的源文件可能没有这个class，可能是因为淘宝只是把FullWidth应用于个别页面(body内标有FullWidth)，或者干脆取消了。而你看的页面刚好是不含有此class的页面。
To Jorux:
您好：我重新按您的讲解做了一下您《十步》的教程，但我觉得有一段代码有问题：
body.services #header {
height: 150px;
background: #db6d16
url(../images/headers/services.jpg);
}
如果services页面的Header的样式表中background: #db6d16
url(../images/headers/services.jpg);引用此副图片就不对了吧？应该是引用about.jpg的图片吧？按照您这段代码services页面的大banner就不对了。不知道是什么原因？
To Xf5337651:
你问的问题很好。在教程中我没说清楚，其实你得自己制作一个services.jpg，这附图和about.jpg差不多，只是需要把about的土黄色竖条背景换到services的位置去，然后命名为services.jpg就可以了。
To Jorux:
这回真的明白了，也明白了淘宝样式的使用，十分感谢！
还得请教个问题：之间的文本可以两边都对齐吗？如果选择左对齐，由于有标点符号右侧就会参差不齐，但如果选择了两边对齐，半行文字就是散开了，有什么好办法吗？
谢谢。。。
To xf:
可能是因为你使用了中英文混编或是使用了英文的标点符号，基本是没有解决办法，除了你不使用英文字母或是其标点。
Torus:
我想问你一个CSS的问题：
.out {
background:#bbb;
margin:5px 1px;
border: 1px solid red;
}
.in {
background:#fff;
border:1px solid #555;
padding:5px 5px;
position:relative;
top:0px;
left:5px;
}
为什么在IE和FF里面都没有反应出
.out {
background:#bbb;
margin:5px 1px;
border: 1px solid red;
} 里的margin的 top和bottom的值
也就是说margin后的“5px”没有效果。
这是内容代码
/*
*/
To CAII :
你的代码在这会被屏蔽的。
你的问题很可能是margin-collapse.
请参照：http://jorux.com/archives/property-4-if-you-love-css/
hao
终于把目前已经出来的所有属性篇和布局篇学完了，嗯，感觉不错。
第一次要在这里“写作业”，没想到遇到了一个简单的题目。 呵呵。
以下是建立在Jorux基础上的我的答案：
* {
margin: 0;
padding: 0;
}
body{
font-size:62.5%;
background-color:#444;
}
#AllWrap {
float:left;
width: 100%;
background-color: white;
}
#Header {
height: 8em;
background-color: red;
}
#Content {
float:left;
width:70%;
height:40em;
background-color: white;
}
#Sidebar {
float:right;
width:30%;
height:40em;
background-color: green;
}
#Footer {
clear:both;
width:100%;
height: 8em;
background-color: blue;
}
呵呵。期待布局（3）。
A ZA A ZA Fighting！
老大，请教你一个问题，看一下这个页面，在FF里显示正常，但IE显示右面的bar下沉了！请问怎么解决？谢谢！
无标题文档
*{
margin:0;
padding:0;
}
#AllWrap{
width:80%;
margin:0 auto;
}
#Header{
height:100px;
background-color:red;
}
#MidWrap{
background-color:green;
}
#Content{
float:left;
width:40%;
height:400px;
background-color: #00FF00;
}
#Sidebar2,#Sidebar1{
float:left;
width:30%;
height:400px;
background-color: #666600;
}
#Footer{
clear:both;
background-color:blue;
height:100px;
}
Header
Sidebar1
Content
Sidebar2
Footer
To alenximeng:
你的有部分代码被屏蔽了，最好有个演示地址。
上面
Header
Sidebar1
Content
Sidebar2
Footer
几行去掉，另加上html部分：
Header
Content
Sidebar
Footer
晕，显示不正常！
Header
Content
Sidebar
Footer
–>
老大给个邮箱或QQ什么的，我传给你，也方便以后有什么问题请教你哦！PS：偶是新手！
请问在IE下如何实现最小宽度布局啊!
在别的浏览器中min-width有用,但在IE中没用啊!
简单写了一下,如果有什么错误,请指出,谢谢.
body{
margin:0;
padding:0;
background:#444;
}
#contain{
width:100%;
height:560px;
margin-left:auto;
float:left;
background:#fff;
}
#header{
width:100%;
height:80px;
background-color:green;
text-align:center;
clear:both;
}
#mid{
width:100%;
height:400px;
}
#content{
float:left;
width:70%;
height:400px;
background-color:red;
}
#sidebar{
float:right;
width:30%;
height:400px;
background-color:yellow;
}
#footer{
width:100%;
clear:both;
background-color:blue;
height:80px;
}
这节没听明白，有些浮躁。。。
代码比之前更简单化了。。
html,body { margin:0px;
background-color:#444444;
}
#allwrap { width:100%;
}
#header { height:80px;
background-color:#FF0000;
}
#content { width:70%;
height:400px;
float:left;
background-color:#FFFFFF;
}
#sidebar { width:30%;
height:400px;
float:left;
background-color:#00FF00;
}
#footer { width:100%;
height:80px;
background-color:#0000FF;
clear:both;
}
很喜欢这个网站的氛围。尽管大部分看不懂。
自从被一个链接跳转到这里以后，把你的教学贴都看了遍，收获很大，作业就不贴了，谢谢。
虽然不知道说的是什么，但是感觉很厉害的样子！！