接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：
1.确定布局
w3cn的最初设计草图如下：
用表格的设计方法的话，一般都是上中下三行布局。
用DIV的话，我考虑使用三列来布局,成为这样
2.定义body样式
先定义整个页面的body的样式,代码如下：
以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。
3.定义主要的div
初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义:
注意： 定义中列和右列div我都采用了POSITION:absolute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。
这时候整个页面的代码是：
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
4.100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着小鱼自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：
1.确定布局
w3cn的最初设计草图如下：
用表格的设计方法的话，一般都是上中下三行布局。
用DIV的话，我考虑使用三列来布局,成为这样
2.定义body样式
先定义整个页面的body的样式,代码如下：
程序代码
body{MARGIN:0px;
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:'LucidaGrande','LucidaSansUnicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR:#666;
FONT-SIZE:12px;
LINE-HEIGHT:150%;}
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:'LucidaGrande','LucidaSansUnicode','宋体','新宋体',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;}
#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；。
这时候整个页面的代码是：
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
4.100%自适应高度?
为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着小鱼自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。
