Tag 9: Erstes CSS-Layout-Beispiel_Grundlegendes Tutorial

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

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

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

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

页面左列

页面中列

页面右列

현재 페이지 효과에서는 병치된 회색 직사각형 3개와 배경 이미지만 볼 수 있습니다. 그런데 높이를 전체화면으로 하고 싶은데 어떻게 해야 하나요?

4.100% 적응형 키?

세 개의 열을 동일한 높이로 유지하기 위해 #left, #middle, #right에 "

height:100%;"를 설정하려고 시도했지만 예상한 적응성이 없는 것으로 나타났습니다. 높이 효과가 전혀 없습니다. 몇 번 시도한 후에 각 div에 절대 높이("높이:1000px;")를 지정해야 했고, 콘텐츠가 증가함에 따라 이 값을 지속적으로 수정해야 했습니다. 높이 조절하는 방법은 없나요? Ajie 자신의 연구가 심화됨에 따라 그는 유연한 해결책을 발견했습니다. 실제로 100%를 설정할 필요는 없습니다. 우리는 테이블 사고에 너무 깊이 갇혀 있었습니다. 이 방법은 다음 연구 섹션에서 자세히 소개됩니다.