作者:csdn
来源:csdn
热度:
2006-10-13 12:26:53
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：
w3cn的最初设计草图如下：
用表格的设计方法的话，一般都是上中下三行布局
。用DIV的话，我考虑使用三列来布局,成为这样
。
先定义整个页面的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%。
初次使用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；。
这时候整个页面的代码是：
以下是引用片段：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"lang="gb2312">
<head>
<title>欢迎进入新《网页设计师》:web标准教程及推广</title>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<metahttp-equiv="Content-Language"content="gb2312"/>
<metacontent="all"name="robots"/>
<metaname="author"content="ajie(at)netease.com,阿捷"/>
<metaname="Copyright"content="www.w3cn.org,自由版权,任意转载"/>
<metaname="description"content="新网页设计师,web标准的教程站点,推动web标准在中国的应用."/>
<metacontent="web标准,教程,web,standards,xhtml,css,usability,accessibility"name="keywords"/>
<linkrel="icon"href="/favicon.ico"type="image/x-icon"/>
<linkrel="shortcuticon"href="http://www.w3cn.org/favicon.ico"type="image/x-icon"/>
<linkrel="stylesheet"rev="stylesheet"href="css/style01.css"type="text/css"media="all"/>
</head>
<body>
<divid="left">页面左列</div>
<divid="middle">页面中列</div>
<divid="right">页面右列</div>
</body>
</html>
这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
我来说两句：
推荐文章
相关文章