CSS 탄성 유체 레이아웃은 다른 컨텐츠 디스플레이를 충족합니다

오늘날, 사용자의 모니터가 점점 커지고있을 때, 이전 1024*768 Solid Width 레이아웃은 큰 화면을 가진 사용자에게 점점 더 많이 나오고 있습니다. 스크린 폐기물, 웹 디자이너 로서이 그룹에 좋은 사용자 인터페이스를 제공 할 책임이 있습니다.

물론 이러한 종류의 화면의 낭비를 줄이기 위해 탄성 유체 레이아웃을 채택하는 것이 최상의 솔루션입니다. 그러나 다양한 제한으로 인해 현재 웹 페이지에는 유체 탄성 레이아웃 (특히 브라우저 제조업체의 표준의 파렴치한 파괴 및 CSS 표준의 불완전한 지원 등을 완전히 채택하는 조건이 완전히 갖추어져 있지 않습니다. 사용자와 제조업체 사이의 중개인으로서, 우리는 호환되는 태도로 둘 사이의 격차에만 적응할 수 있습니다. 따라서 전이 솔루션으로서 탄성 + 고형 너비 레이아웃과 같은 레이아웃이 있습니다.

여기에 언급 된 탄력성은 화면 너비에 적응하는 배경을 나타냅니다. 고형 너비는 기본 내용이 넓은 화면과 좁은 화면에서 자동으로 중앙에있을 수 있음을 의미합니다. 크기와 해상도가 다른 사용자의 요구를 충족시키기 위해 격차에서 살아남습니다. 아래 그림에 표시된 디자인은 일반적인 예입니다.

덜 말도 안되는 이야기를하고 요점으로 돌아가서 그러한 레이아웃 구조를 만들어 봅시다.

먼저 구조 층을 구축하십시오.

구조 레이어를 분석하겠습니다. 웹 페이지에는 헤더, 컨텐츠 영역 및 컨테이너 레이어, 바닥 글 및 바닥 글을 분리합니다 이 방법을 디자인하려면 컨텐츠 영역이 하나의 화면 이하인 경우이 바닥 글이 절대적으로 바닥에 있기를 원합니다.

래퍼와 바닥 글 컨테이너를 100% 너비로 설정하여 화면 너비에 자동으로 적응합니다. 또한 헤더 헤더 영역을 100% 너비로 설정합니다. 이런 식으로, 우리는 헤더와 바닥 글의 배경이 큰 화면 아래에서 전체 화면 공간을 수평으로 채울 수 있도록 수평으로 타일 된 이미지를 헤더와 바닥 글에 삽입 할 수 있습니다.

주요 내용으로서, 우리의 일반적인 접근 방식은 해상도가 커질 때 중심을두고 블랭크를 남겨 두는 것입니다. 헤더 영역은 100% 너비로 설정되었으므로 컨테이너 레이어 인 내장을 헤더에 추가하여 실제 헤더 텍스트 콘텐츠의 캐리어 역할을합니다. 자동으로 중심으로하자.

이런 식으로 헤더의 텍스트는 Haeader의 상부 레이어를 떠 다니면 다른 배경 이미지를 설정하여 오버레이 된 헤더 효과를 형성 할 수 있습니다.

마찬가지로, 바닥 글을 이런 식으로 구현할 수도 있습니다.

위의 구조 계층에서는이 방법을 중간 컨텐츠 영역에서 사용하지 않았지만 콘텐츠의 컨텐츠 영역에는 컨테이너가 포함되어 있지 않고 컨테이너가 하나만 있음을 알 수 있습니다. 물론 큰 해상도에서 텍스트의 양쪽에 너무 비어 있지 않으면 어떻게해야합니까? 물론 둥지를 줄이기 위해 해결 방법을 채택 할 수 있습니다. 본문의 배경에 대형 이미지를 추가하고 배경 위치를 사용하여 이미지를 중앙에 배치하여 콘텐츠 영역의 양쪽에있는 그림이 표시됩니다.

이 블로그는 큰 해상도 로이 블로그의 양쪽에있는 사진을보고 창을 좁 히면 양쪽의 작은 그림 만 1024*768에 표시됩니다. 그리고 텍스트의 내용은 항상 중앙에 표시됩니다.

효과를 입증하기 위해 다른 색상 조정을 추가하면 최종 스타일은 다음과 같습니다.