如何使用CSS来进行网页排版

http://www.xydyz.com 来源:网络收集 2008-07-12 阅读: 评论

1.确定布局

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；。

这时候整个页面的代码是：

以下是引用片段：

<!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标准在中国的应用."/>