9각형 그리드는 비교적 오래된 디자인입니다. 가장 기본적인 성능은 실제로 3개의 행과 3개의 열이 있는 테이블과 같습니다. 실제로 이는 원래 창의 C/S 구조에서 더 많이 사용되었습니다. 예를 들어 소프트웨어에서 양식을 자주 볼 수 있는데 이는 실제로 양식을 늘려야 하기 때문입니다. 이 기술은 레이아웃 디자인을 위한 C/S 소프트웨어에 널리 사용됩니다. B/S 시스템이 대중화되는 오늘날의 사회에서 이 레이아웃은 일부 웹 디자이너에 의해 웹 페이지에서 점차적으로 사용됩니다. 가장 일반적으로 사용되는 레이아웃은 둥근 모서리 상자 레이아웃입니다.
다음 그림은 Nine Palace Grid의 기본 레이아웃을 보여줍니다.
위 그림에서 볼 수 있듯이 각 행에는 3개의 열이 포함되어 있습니다. 여기서 파란색 사각형은 상단 모서리이고, 이 4개의 블록은 너비와 높이가 고정된 영역이며, 4개의 노란색 영역은 수평이 되는 4개의 측면입니다. 또는 수직 타일로 구성되어 있으며 중앙의 주황색 영역은 콘텐츠를 로드하는 주요 영역입니다.
이러한 구조는 다양한 화면 해상도에 따라 컨텐츠 영역의 너비와 높이가 자동으로 확장되는 데 가장 적합합니다. 이러한 구조는 웹 디자이너가 가장 원하는 레이아웃 구조이기도 합니다.
아래와 같이 구현해 보겠습니다.
구조층 :
8방향 스트레칭에 적응해야 하기 때문에 각 방향은 div로 구현되는데, 한 방향이 없으면 유연성이 부족합니다. 그러면 이 원리에 따라 다음과 같은 구조를 얻을 수 있습니다.
스타일 레이어 :
구조에 따라 기본적인 스타일을 작성할 수 있습니다. 기본 구현 원리는 전체 컨테이너.box를 상대 위치로 설정하고 Overflow:hidden을 설정하여 그 너머의 모든 영역이 잘리고 내부의 8개 방향에 있는 div가 절대 위치로 설정되고 z - Index는 2로 설정되고 네 모서리 컨테이너는 각각 네 모서리로 설정됩니다.
.box{오버플로:숨김;위치:상대적;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {위치:절대;z-색인:2;}
<div 클래스="상자">
<div class="t_l"></div>
<div class="t_m"></div>
<div class="t_r"></div>
<div class="m_l"></div>
<div class="m_m">콘텐츠 영역</div>
<div class="m_r"></div>
<div 클래스="b_l"></div>
<div 클래스="b_m"></div>
<div class="b_r"></div>
</div>