wulin.com html 튜토리얼 칼럼으로 돌아가려면 여기를 클릭하십시오. CSS 튜토리얼을 탐색하려면 여기를 클릭하십시오.
위 : 마크 업 언어 - 사진 교체 . 15 장 <body> 스타일을 지정합니다
콘텐츠 및 디스플레이 효과를 개별적으로 설정하는 이점 중 하나는 유연성입니다. CSS를 사용하여 웹 사이트의 레이아웃 (12 장에 사용 된 방법)을 제어함으로써 전체 웹 사이트의 디자인 요소를 제어하고 몇 가지 규칙을 변경하며 수천 페이지를 즉시 극적으로 업데이트 할 수 있습니다.
레이아웃을 제어하기 위해 CSS를 사용하는 편의 예 중 하나는 <body>의 스타일을 지정하는 것입니다. <body> 태그에 클래스 또는 id를 추가하면 페이지의 모든 태그를 사용자 정의 할 수 있습니다. 반복적 인 정의에 전혀 어려움이 없습니다.
이 장에서는 태그 구조를 사용하여 <body> 태그에 클래스를 추가하여 두 개의 다른 레이아웃 구성을 전환하는 방법을 살펴 봅니다. 2 열 또는 3 열 레이아웃.
CSS 레이아웃 기술을 사용하여 빠른 회사 용 웹 사이트를 재 설계 할 때와 마찬가지로, 문제 중 하나는 다음과 같습니다. 모든 페이지에서 동일한 내비게이션과 페이지의 끝을 공유하지만 두 개의 다른 레이아웃도 필요합니다.
첫 번째 레이아웃은 인덱스 페이지 (홈 페이지)이며 그림 15-1을 참조하십시오. 이것은 탐색 기능이있는 페이지로, 사용자는 웹 사이트의 디렉토리 구조에 계속 침투 할 수 있습니다. 우리는이 페이지에 3 열 레이아웃을 사용하기로 결정했습니다.
그림 15-1 빠른 회사의 3 열 색인 페이지 데모
두 번째 페이지 레이아웃은 내부 페이지 그림 15-2입니다. 대상 이이 레이아웃 레이아웃을 사용하는 것처럼 느껴지는 모든 페이지. 가독성을 향상시키기 위해 왼쪽 열을 생략하고 두 개의 열, 즉 하나의 큰 열이 내용을 배치하고 다른 열은 광고를 남겨두기로 결정했습니다.
그림 15-2 빠른 회사의 2 열 텍스트 페이지 데모.
내가 설명하는 이유는 우리가 특정 레이아웃의 위대한 미스터리를 깨뜨렸다는 것을 증명하는 것이 아니라 <hod> 태그에 클래스를 추가하면 열의 너비를 조정하고 페이지 모양에 따라 세 번째 열을 배치하거나 생략 할 수 있음을 보여주기 때문입니다. 그러한 효과를 만들 때 규칙은 전혀 반복되지 않으며 추가 스타일 시트가 소개되지 않습니다. 마크와 스타일 구조가 추가됩니다.
두 페이지가 공유하는 마킹 구조를 설명하기 시작한 후, 이러한 이야기는 의미가 있습니다. 열 레이아웃을 달성하기 위해 12 장에 언급 된 절대 포지셔닝 방법이 사용됩니다.
텍스트 페이지의 단순화 된 태그 구조는 다음과 같습니다.
<div id = 헤더>
... 여기 헤더 정보 ...
</div>
<div id = content>
... 여기 컨텐츠 ...
</div>
<div id = right>
... 오른쪽 열 정보 ...
</div>
<div id = 바닥 값>
... 바닥 글 정보 ...
</div>
CSS 규칙을 #Content 및 #Footer와 함께 #Right에 넣기에 충분한 오른쪽 패치를 사용합니다. 이 예에서 190 픽셀로 충분합니다.
#content, #footer {
여백 : 10px 190px 10px 10px;
}
인덱스 페이지의 경우 마크 업 구조는 정확히 동일하므로 공유 CSS 규칙을 복사 할 필요가 없지만 #Content의 왼쪽에 세 번째 열 (#Left)이 추가됩니다.
<div id = 헤더>
... 여기 헤더 정보 ...
</div>
<div id = content>
... 여기 컨텐츠 ...
</div>
<div id = 왼쪽> ... 왼쪽 열 정보 ... </div> <div id = right> ... 오른쪽 열 정보 ... </div><div id = 바닥 값>
... 바닥 글 정보 ...
</div>
이 3 열 구조의 경우 오른쪽 열을 수용하기 위해 #Content 및 #Footer의 오른쪽 외부 패치를 설정해야 할뿐만 아니라 새로 추가 된 왼쪽 열을 수용하도록 왼쪽 외부 패치를 설정해야합니다.
그러나 왼쪽 외부 패치는 이중 열만있는 사전 설정 텍스트 페이지 레이아웃과 일치하도록 10 픽셀로 설정되었습니다.
와우, 우리는 붙어 있습니다. 어떻게해야합니까? 계속 읽으십시오.
이전 페이지 1 2 3 다음 페이지 전체 텍스트 읽기