当前位置 >> CSS教程>>第9 节:第一个CSS 布局实例

上一篇:« 第8 节:CSS 布局入门 下一篇:第10 节:自适应高度 »

第9 节:第一个CSS 布局实例

发布时间:2009年10月13日 次浏览:

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

注:在实际应用过程中,DIV 在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价
值判断。好,不罗嗦了,我们开始:
1.确定布局
 
用表格的设计方法的话,一般都是上中下三行布局 。用 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">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>欢迎进入新《网页设计师》:web 标准教程及推广</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />
<meta name="description" content="新网页设计师,web 标准的教程站点,推动 web 标准在中国的应用." />
<meta content="web 标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">页面左列</div>
<div id="middle">页面中列</div>
<div id="right">页面右列</div>
</body>
</html> 
这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?
4.100%自适应高度?
为了保持三列有同样的高度,我尝试在#left、#middle 和#right 中设置"height:100%;",但发现完全没有预想的自适应高度
效果。经过一番尝试后,我只好给每个 div 一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。
难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置 100%,我们已
经被 table 思维禁锢太深了,这个办法在下一节的学习中详细介绍。

分享家:Addthis中国

喜欢这篇文章的人还喜欢...

全部评论(1条)

  • 1楼发表于:2009-11-23 1:31:56

    支持木木,加油!

  • 回复

发表评论

(必填)

(必填)