블루 플로이버 헤더 설계 기법

헤더는 웹 설계의 중요한 요소로 설계를 만들거나 해제할 수 있습니다. 웹 2.0 이후, 우리는 많은 디자인 트렌드를 보아왔고, 가장 획기적인 것 중 하나는 큰 머리말입니다. 그러나 헤더는 내내 상자 모양으로 남아 있었다.

모바일 디자인 웹사이트인 Blueflavor는 제가 아직 다른 곳에서 보지 못한 것으로 이러한 추세를 극복했고, 창조하는 데 훌륭한 CSS 기술이 필요하지 않습니다.

보시는 바와 같이 헤더에 내용 메뉴와 시작이 있습니다. 어떻게 그럴 수 있을까요?

이미지를 여러 조각으로 잘라 (플로팅) 디브로 맞출 수 있습니다. 그러나 이로 인해 IE 6, 7, Firefox와의 브라우저 차이에서 발생할 수 있는 문제가 발생합니다.

The best way is to keep the image whole. Blue Flavor uses two columns with the first column sitting under the longer part of the header. The content div sits under the shorter part of the header. Normally the content div would sit on the same level as the first column. To move it up into the gap of the image, use a negative margin which will shift it up. Blue Flavor uses `margin-top: -20px`.

일반적으로 음의 여백은 사용되지 않지만 헤더의 모양과 느낌을 변경하는 간단한 방법입니다.