고정 너비 콘텐츠, 전체 너비 색상 배경 및 두 개의 전체 너비 섹션과 겹치는 이미지에 특이점 사용
클린트 도리 엇
다음과 같은 레이아웃을 생성하려고합니다.
파란색은 상단 헤더, 빨간색은 하단 헤더, 녹색은 메뉴, 흰색 하단은 본문입니다. 흰색 원은 메뉴 섹션이 아닌 헤더 섹션과 겹치도록 배치하려는 로고입니다.
머리글 및 바닥 글 너비가 100 % 인 Singularity Grid 레이아웃 의 조언 에 따라 콘텐츠 섹션에 div 래퍼를 설정하고 전체 너비 배경색이 작동하도록했습니다.
또한 div 래퍼를 사용하여 헤더와 메뉴 영역을 화면 중앙의 고정 너비 위치 (검은 색 세로선으로 표시됨)에 배치했습니다.
마지막으로 그리드의 일부 (9,4) 만 차지하도록 헤더 영역을 설정하고 그리드 (3,1)의 일부만 차지하도록 로고를 설정했습니다.
안타깝게도 그리드 부분 옆에 로고를 정렬하고 전체 너비 컬러 배경을 유지하는 방법을 잘 모르겠습니다. 그리고 div를 설정 한 방식이 내가하려는 작업과 일치하지 않는 경우 놀라지 않을 것입니다.
제안이나 팁이 있습니까?
저는 Sassmeister 예제를 설정했습니다. 실제 사이트는 drupal로 수행되고 있지만 데모는 더 읽기 쉽게 만들기 위해 처음부터 수행되었습니다. http://sassmeister.com/gist/7163c32a080a446f20ff
여자 이름
로고가있는 행에 보이는대로 오버플로를 켜고 로고가 상단 헤더와 동일한 행에 있도록하여 하단 헤더로 돌출 할 수 있도록해야 할 것입니다. 이것은 다소 거칠지 만 내가 의미하는 바를 보여줍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
몇 마디 만하겠습니다