用表格的设计方法的话，一般都是上中下三行布局
。用DIV的话，我考虑使用三列来布局,成为这样
。
2.定义body样式
先定义整个页面的body的样式,代码如下：
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%; }
以上代码的作用在上一天的教程有具体说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。
3.定义主要的div
初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:
/*定义页面左列样式*/
#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.w3cn.org,自由版权,任意转载\" />
<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.w3cn.org/favicon.ico\" type=\"image/x-icon\" />
<link rel=\"stylesheet\" rev=\"stylesheet\" href=\"css/style01.css\" type=\"text/css\" media=\"all\" />
</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%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中具体介绍。
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
