大中小

WEB标准教程第9天：第一个CSS布局实例_Web标准教程

编辑Tag赚U币

教程Tag：暂无Tag,欢迎添加,赚取U币!

　　1.确定布局
　　
　　w3cn的最初设计草图如下： w3cn设计草图

　　用表格的设计方法的话，一般都是上中下三行布局表格布局示意。用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">

　　<head>

　　<title>欢迎进入新《网页设计师》:web标准教程及推广</title>

　　</head>

　　<body>

　　</body>

　　</html>

　　这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？

　　4.100%自适应高度?

　　为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中具体介绍。