css网站布局实录

hjkefu

css网站布局实录
和传统的方法一样 ，你首先要在脑海里有大致的轮廓构 想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更 关注结构和内容，实际上它与网页的美观没有根本企业网站建设冲突你想怎么设计就怎么设计，用传统表格方 法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如 何运用就看你的想象力了。

    注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。

一、 确定布局

用表格的设计方法的话，一般都是上中下三行布局：

用DIV的话，应考虑使用三列来布局,成为这样：

二、 定义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%; }

以上代码的作用在《CSS布局入门》的中小企业网站建设教程有详细说明，大家应该一看就明白。定义了边 框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定 义了字体尺寸为12px；字体颜色为#666;行高150%。

三、 定义主要的div

初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单，别说我 偷懒，先实现企业网站建设简单的，增加点信心嘛！)。分别定义左中右的宽度为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;

gk2004busy

很实用的知识
想深入的话，大家可以去看看 CSS 禅意花园，基本上是各种CSS技术的演示都有了