테이블 디자인 방식을 사용하는 경우, 일반적으로 상단, 중간, 하단 행이 있는 3열 레이아웃입니다. 
. DIV를 사용하는 경우 레이아웃에 다음과 같이 세 개의 열을 사용하는 것을 고려합니다. 
.
2. 신체 스타일 정의
먼저 전체 페이지의 본문 스타일을 정의합니다. 코드는 다음과 같습니다.
본문 { 여백: 0px;
패딩: 0px;
배경: url(../images/bg_logo.gif) #FEFEFE 오른쪽 하단 반복 없음;
글꼴 계열: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
색상: #666;
글꼴 크기:12px;
줄 높이:150% }
위 코드의 기능은 전날 튜토리얼에서 자세히 설명하였으니, 누구나 한 눈에 이해하실 수 있을 것입니다. 테두리 여백은 0으로 정의됩니다. 배경색은 #FEFEFE이고, 배경 이미지는 bg_logo.gif이며, 이미지는 페이지 오른쪽 하단에 위치하며 글꼴 크기는 12px로 정의됩니다. 색상은 #666이고 줄 높이는 150%입니다.
3. 메인 div 정의
CSS 레이아웃을 처음 사용했을 때 고정 너비 3열 레이아웃을 사용하기로 결정했습니다(적응형 해상도 디자인보다 간단합니다. 호호, 게으르다고 말하지 마세요. 먼저 간단한 레이아웃을 구현하여 자신감을 얻으세요). !). CSS에서 다음과 같이 정의된 왼쪽, 가운데 및 오른쪽의 너비를 각각 200:300:280으로 정의합니다.
/*페이지의 왼쪽 열 스타일 정의*/
#왼쪽{WIDTH:200px;
여백: 0px;
패딩: 0px;
배경: #CDCDCD;
}
/*페이지의 열 스타일 정의*/
#middle{ 위치: 절대;
왼쪽:200px;
TOP:0px;
너비:300px;
여백: 0px;
패딩: 0px;
배경: #다다다;
}
/*페이지의 올바른 열 스타일 정의*/
#right{ 위치: 절대;
왼쪽:500px;
TOP:0px;
너비:280px;
여백: 0px;
패딩: 0px;
배경: #FFF }
참고: 중간 열과 오른쪽 열 div를 정의할 때 POSITION:absolute;를 사용한 다음 LEFT:200px;TOP:0px;를 각각 정의했습니다. 이것이 제가 사용한 레이아웃의 핵심입니다. 레이어 절대 위치 지정. 중간 열은 페이지 왼쪽 테두리에서 200px, 위쪽에서 0px로 정의하고, 오른쪽 열은 페이지 왼쪽 테두리에서 500px, 위쪽에서 0px로 정의합니다.
이때 전체 페이지의 코드는 다음과 같습니다.
<html xmlns=" http://www.w3.org/1999/xhtml " lang="gb2312">
<머리>
<title>새로운 "Web Designer"에 오신 것을 환영합니다: 웹 표준 튜토리얼 및 프로모션</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="로봇" />
<meta name="author" content="ajie(at)netease.com,阿杰" />
<meta name="Copyright" content=" www.w3cn.org , 무료 저작권, 모든 복제" />
<meta name="description" content="새로운 웹 디자이너, 웹 표준 튜토리얼 사이트가 중국에서 웹 표준 적용을 촉진합니다." />
<meta content="웹 표준, 튜토리얼, 웹, 표준, xhtml, CSS, 유용성, 접근성" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="단축 아이콘" 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>
<본문>
<div id="left">페이지 왼쪽 열</div>
<div id="middle">페이지 중간 열</div>
<div id="right">페이지 오른쪽 열</div>
</body>
</html>
현재 페이지 효과에서는 병치된 회색 직사각형 3개와 배경 이미지만 볼 수 있습니다. 그런데 높이를 전체화면으로 하고 싶은데 어떻게 해야 하나요?
4.100% 적응형 높이?
세 개의 열을 동일한 높이로 유지하기 위해 #left, #middle 및 #right에 "height:100%;"를 설정해 보았지만 예상한 적응형 높이 효과가 전혀 없는 것으로 나타났습니다. 몇 번 시도한 후에 각 div에 절대 높이("높이:1000px;")를 지정해야 했고, 콘텐츠가 증가함에 따라 이 값을 지속적으로 수정해야 했습니다. 높이 조절하는 방법은 없나요? Ajie 자신의 연구가 심화됨에 따라 그는 유연한 해결책을 발견했습니다. 실제로 100%를 설정할 필요는 없습니다. 우리는 테이블 사고에 너무 깊이 갇혀 있었습니다. 이 방법은 다음 연구 섹션에서 자세히 소개됩니다.