2012-10-15 3 views
2

중앙 열에 실제 내용이 있고 측면이 장식용 인 3 열 배경의 웹 사이트를 만들고 싶습니다.CSS를 사용하여 3 열 웹 사이트 배경을 만드는 방법은 무엇입니까?

블로그는 블로그에서 자주 볼 수 있지만 (많은 웹 사이트에서 자주 볼 수 있습니다.) 대부분의 Tumblr 블로그는 좋은 예이며 중간에 콘텐츠가 있고 측면에 색상이 있습니다. 창의 크기를 조정할 때 내용의 크기는 변경되지 않지만면은 변경됩니다.

CSS를 사용하여 이미지의 측면을 구성하는 경우를 제외하고는 비슷한 것을하고 싶습니다. 효과적으로 세 개의 열이있는 웹 사이트가 필요합니다. 고정 폭의 중간에 하나의 특정 배경 이미지로 구성되어 콘텐츠를 보관합니다 (배경 이미지는 전체 열을 덮을 수 있어야합니다. 허용되는 이미지, 이미지는 방식) 및 가운데 내용 열의 양쪽에있는 두 개의 열 (배경의 바둑판 식 이미지로 구성됨)이 있습니다. 두 개의 측면 열은 크기를 조정할 수 있어야하며 중간 내용 열의 크기를 변경하지 않고 이미지가 페이지가 확장 될 때 바둑판 식으로 배열되어야합니다. 문제는이 문제를 해결할 방법이별로 없다는 것입니다 (3 열 레이아웃을 만드는 방법에 대한 많은 가이드가 있지만 바둑판 식 이미지로 3 열 배경을 다루는 방법은 없습니다). 그런 웹 사이트는 어떻게 만들 수 있습니까? 시작 지점으로 사용

답변

0

난 당신이 background position이 할 수 있다고 생각합니다.

몸체의 바둑판 식 배경을 페이지의 가운데 가운데에서 기원하여 설정합니다.

콘텐츠 열로 고정 너비의 가운데 맞춤 div를 만듭니다. div에 타일 배경도 설정하십시오.

창을 넓히면 타일링이 양면으로 늘어나지 만 타일링과 div가 모두 중심에 배치되므로 잘 정렬됩니다.

0

이 사이트는 HTML5를 사용하지 않지만 모든 종류의 레이아웃을위한 훌륭한 초기 리소스입니다 : Layout Gala (위쪽은 HTML이 동일하게 유지되고 CSS가 변경된다는 것입니다. 단점은 레이아웃 외에도 -skeleton을 사용하려면 자신 만의 CSS를 제공해야하지만 적절한 경우 머리글, 바닥 글 및 섹션 태그를 사용하여 HTML5를 사용하여 이러한 레이아웃을 쉽게 변환 할 수 있습니다.

관련 문제