css学习手册--第一个CSS布局实例
接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：
1.确定布局
w3cn的最初设计草图如下：
用表格的设计方法的话，一般都是上中下三行布局。
用DIV的话，我考虑使用三列来布局,成为这样
2.定义body样式
先定义整个页面的body的样式,代码如下：
/*定义页面左列样式*/#left{ WIDTH:200px;MARGIN: 0px;PADDING: 0px;BACKGROUND: #CDCDCD;}/*定义页面中列样式*/#middle{ POSITION: absolute;LEFT:200px;TOP:0px;WIDTH:300px;MARGIN: 0px;PADDING: 0px;BACKGROUND: #DADADA;}/*定义页面右列样式*/#right{ POSITION: absolute;LEFT:500px;TOP:0px;WIDTH:280px;MARGIN: 0px;PADDING: 0px;BACKGROUND: #FFF; }?
注意：定义中列和右列div我都采用了POSITION:absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。
这时候整个页面的代码是：
<!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" lang="gb2312"> <head> <title>欢迎进入新《网页设计师》:web标准教程及推广</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <meta content="all" name="robots" /> <meta name="author" content="ajie(at)netease.com,阿捷" /> <meta name="Copyright" content="www.yzci.com,自由版权,任意转载" /> <meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." /> <meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" /> <link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="http://www.yzci.com/favicon.ico" type="image/x-icon" /> <style type="text/css"> body { MARGIN: 0px; PADDING: 0px; BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom; FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif; COLOR: #666; FONT-SIZE:12px; LINE-HEIGHT:150%; } /*定义页面左列样式*/ #left{ WIDTH:200px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #CDCDCD; } /*定义页面中列样式*/ #middle{ POSITION: absolute; LEFT:200px; TOP:0px; WIDTH:300px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #DADADA;} /*定义页面右列样式*/ #right{ POSITION: absolute; LEFT:500px; TOP:0px; WIDTH:280px; MARGIN: 0px; PADDING: 0px; BACKGROUND: #FFF; } </style> </head> <body> <div id="left">页面左列</div> <div id="middle">页面中列</div> <div id="right">页面右列</div> </body> </html> ?这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
4.100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，
==========
如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)：
http://www.yzci.com/<html><head><style type="text/css">#body,div{FONT-SIZE:12px;}#pagebox{margin:0px;PADDING:20px;BACKGROUND: #FFF;FONT-FAMILY: arial,'宋体','新宋体',verdana,sans-serif;WIDTH:600px;}#header{MARGIN: 0px;BORDER: 0px;BACKGROUND: #ccd2de;WIDTH: 580px;HEIGHT: 60px;}#mainbox {MARGIN: 0px;WIDTH: 580px;BACKGROUND: #FFF;}#menu{FLOAT: right;MARGIN: 2px 0px 2px 0px;PADDING:0px 0px 0px 0px;WIDTH: 400px;BACKGROUND: #ccd2de;}#content{FLOAT: right;MARGIN: 1px 0px 2px 0px;PADDING:0px;WIDTH: 400px;BACKGROUND: #E0EFDE;}#sidebar{FLOAT: left;MARGIN: 2px 2px 0px 0px;PADDING: 0px;BACKGROUND: #F2F3F7;WIDTH: 170px;}#footer{CLEAR: both;MARGIN: 0px 0px 0px 0px;PADDING: 5px 0px 5px 0px;BACKGROUND: #ccd2de;HEIGHT: 40px;WIDTH: 580px;}</style></head><body><div id="header">这里是#header{MARGIN: 0px;BORDER: 0px;BACKGROUND: #ccd2de;WIDTH: 580px;HEIGHT: 60px;}</div><div id="mainbox">这里是#mainbox {MARGIN: 0px;WIDTH: 580px;BACKGROUND: #FFF;}包含了#menu,#sidebar和#content<div id="menu">这里是#menu{FLOAT: right;MARGIN: 2px 0px 2px 0px;PADDING:0px 0px 0px 0px;WIDTH: 400px;BACKGROUND: #ccd2de;}</div><div id="sidebar"><p>这里是#sidebar{FLOAT: left;MARGIN: 2px 2px 0px 0px;PADDING: 0px;BACKGROUND: #F2F3F7;WIDTH: 170px;}，背景颜色用的是#main的背景色</p></div><div id="content"><p>这里是#content{FLOAT: right;MARGIN: 1px 0px 2px 0px;PADDING:0px;WIDTH: 400px;BACKGROUND: #E0EFDE;}</p><p>这里是主要内容，根据内容自动适应高度</p><p>这里是主要内容，根据内容自动适应高度</p><p>这里是主要内容，根据内容自动适应高度</p></div></div><div id="footer">这里是#footer{CLEAR: both;MARGIN: 0px 0px 0px 0px;PADDING: 5px 0px 5px 0px;BACKGROUND: #ccd2de;HEIGHT: 40px;WIDTH: 580px;}。</div></div></body></html>?具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加，#content的高度就会增高，同时#mainbox的高度也会撑开，#footer层就自动下移。这样就实现了高度的自适应。
另外值得注意的是：#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;"，这是浮动法定位，还可以采用绝对定位来实现这样的效果。
这个方法存在另一个问题，就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色，因为在Mozilla等浏览器中#mainbox的背景色失效。)
?
?