CSS 탄력적 유동 레이아웃이 다양한 콘텐츠 디스플레이를 충족합니다.

오늘날 사용자의 모니터가 점점 더 커지면서 이전의 1024*768 솔리드 너비 레이아웃은 점점 더 구식이 되어가고 있습니다. 대형 화면을 사용하는 사용자에게는 화면 양쪽의 빈 공간이 첫눈에 진지한 느낌을 줍니다. 웹 디자이너로서 귀하는 이 사용자 그룹에게 좋은 사용자 인터페이스를 제공할 책임이 있습니다.

물론 이러한 화면 낭비를 줄이기 위해서는 탄력적인 유동 레이아웃을 사용하는 것이 가장 좋은 솔루션입니다. 화면 공간을 최대한 활용하고 해상도에 관계없이 콘텐츠를 전체 화면에 표시할 수 있습니다. 그러나 다양한 제한으로 인해 현재 웹 페이지는 아직 유동적 탄력적 레이아웃을 완전히 채택할 준비가 되어 있지 않습니다(특히 브라우저 제조업체의 무자비한 표준 짓밟기와 CSS 표준에 대한 불완전한 지원 등). 사용자와 제조업체 사이의 중개자로서 우리는 양립할 수 있는 사고방식으로 둘 사이의 격차에만 적응할 수 있습니다. 따라서 과도기적 솔루션으로 탄력적 + 고정 너비 레이아웃과 같은 레이아웃이 있습니다.

여기에 언급된 탄력성은 배경이 화면 너비에 맞춰지는 것을 의미하고, 고정 너비는 텍스트 콘텐츠가 와이드스크린이나 좁은 화면에서 자동으로 중앙에 배치될 수 있음을 의미합니다. 다양한 크기 해상도를 가진 사용자의 요구를 충족하기 위해 균열에서 살아남으세요. 아래 디자인은 대표적인 예입니다.

더 이상 고민하지 말고 본격적으로 이와 같은 레이아웃 구조를 만들어 보겠습니다.

먼저 구조 레이어를 빌드합니다.

구조적 레이어를 분석합니다. 웹 페이지는 일반적으로 헤더, 콘텐츠 영역, 바닥글의 세 부분으로 구성됩니다. 우리는 래퍼라는 컨테이너 레이어에 헤더와 콘텐츠를 넣고 래퍼라고 하는 바닥글을 분리합니다. 왜 이렇게 디자인되었나요? 콘텐츠 영역이 한 화면보다 작은 경우에도 이 바닥글이 절대적으로 맨 아래에 표시되도록 하려고 합니다.

래퍼와 바닥글이라는 두 컨테이너의 너비를 100%로 설정하여 화면 너비에 자동으로 맞춰집니다. 또한 헤더 영역을 100% 너비로 설정합니다. 이런 식으로 머리글과 바닥글에 가로로 타일링할 수 있는 이미지를 삽입하여 큰 화면에서 머리글과 바닥글의 배경이 가로로 전체 화면 공간을 채울 수 있도록 할 수 있습니다.

본문 내용은 해상도가 커질수록 중앙에 표시하고 양쪽에 공백을 남겨 두는 것이 일반적인 접근 방식입니다. 헤더 영역이 100% 너비로 설정되었으므로 헤더에 실제 헤더 텍스트 콘텐츠의 전달자 역할을 하는 또 다른 컨테이너 레이어 인헤더를 추가한 다음 960픽셀과 같은 고정 너비 값을 설정합니다. 그리고 그것이 중심이 되도록 놔두세요.

이렇게 하면 페이지 헤더의 주요 텍스트가 haeader의 상위 레이어에 떠 있게 됩니다. 이 두 레이어는 서로 다른 배경 이미지로 설정되어 오버레이를 형성할 수 있습니다. 더 큰 화면 해상도를 자동으로 조정할 수 있는 헤더 효과입니다.

같은 방법으로 바닥글도 이 방법으로 구현할 수 있습니다.

위의 구조 레이어에서는 중간 콘텐츠 영역에서는 이 방법을 사용하지 않고 약간 변경한 것을 보면 콘텐츠 영역에는 임베디드 컨테이너가 없고 컨테이너가 하나만 있는 것을 볼 수 있습니다. 고해상도에서 텍스트의 양면이 비어 있는 것을 방지하려면 어떻게 해야 합니까? 물론 머리글과 바닥글 방법을 사용하고 내용에 div를 추가할 수 있습니다. 물론 중첩을 줄이기 위해 해결 방법을 사용할 수 있습니다. 본문 배경에 매우 큰 그림을 추가하고 background-position을 사용하여 그림을 배치하고 중앙에 배치하여 콘텐츠 영역의 양쪽에 그림이 표시되도록 할 수 있습니다.

이 블로그는 특정 사례입니다. 이 블로그의 양쪽 사진을 고해상도로 본 후 창을 축소해 보면 양쪽 사진 중 작은 영역만 1024*로 표시되는 것을 볼 수 있습니다. 768, 본문은 항상 중앙에 표시됩니다.

효과를 보여주기 위해 몇 가지 다른 색상 조정을 추가했으며 최종 스타일은 다음과 같습니다.