css布局实例

定义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;。
这时候整个页面的代码是:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" lang="gb2312">

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






http://www.w3cn.org/favicon.ico" type="image/x-icon" />

页面左列
页面中列



这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?
4.100%自适应高度?
为了保持三列有同样的高度,我尝试在#left、#middle和#right中设置"height:100%;",但发现完全没有预想的自适应高度效果。经过一番尝试后,我只好给每个div一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置100%,我们已经被table思维禁锢太深了,这个办法在下一节的学习中详细介绍。

评论 (2)
  1. 沙发
    死鱼 2006-05-07 04:45

    站长资讯里面有一篇相关的介绍你可以看一下的
    链接:http://www.chinahtml.com/webdesign/5/2006/css-css-11396357553485.shtml

  2. 板凳
    鱼乐 2006-05-07 03:56

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