헤더입니다
- 왼쪽입니다
- 여기가 하단입니다
며칠 전 CSS로 3열 레이아웃을 작성할 때 갑자기 이 방법이 생각났는데, 뭔가 잘못된 것이 있으면 언제든지 조언해 주세요.
3열 레이아웃을 작성해야 할 때 일반적으로 다음 DIV 레이아웃 방법을 사용합니다.
이러한 중첩 방법을 사용하면 의심할 여지 없이 코드 오류 가능성을 많이 줄일 수 있지만 동시에 이러한 레이아웃은 약간 복잡하고 나중에 유지 관리하기가 약간 불편합니다. 탐색을 레이아웃할 때 자주 사용하는 방법은 레이아웃에
이는 고정 너비 레이아웃이므로 유동적 레이아웃은 아직 테스트되지 않았습니다. 시간이 나면 아래에 이 레이아웃의 코드를 붙여넣어 보겠습니다.
| <머리> <스타일 유형="텍스트/css"> * {여백:0;} 몸 { 너비:100%; 높이:100%; 배경:#ddedfb; } #mainContent { 너비:600px; 여백:10px 자동; } #머리글,#바닥글 { 배경:#8AC7FA; 높이:80px; 지우기:둘 다; } #바닥글 { 지우기:둘 다; 패딩 상단:10px; } #콘텐츠 { 높이:300px; 여백:10px 자동; } #컨텐츠{ 목록 스타일:없음; 높이:100%; } #컨텐툴리{ 너비:150px; 높이:100%; 배경:#8AC7FA; 부동:왼쪽; } #컨텐툴리#li2 { 너비:280px; 여백:0 10px; } #content ul li#li2 ul li { 너비:270px; 높이:140px; 여백:5px; 배경:#0581F0; } <본문> 헤더입니다
|