이전 튜토리얼 " The Unbreakable Nine-Gong Grid Layout "에서는 너비와 높이를 완전히 유연하게 조정하여 보다 유연한 레이아웃 스타일을 달성할 수 있는 비교적 완벽한 9각형 그리드 레이아웃 방법을 소개했습니다.
그러나 탄력적 기능을 완벽하게 반영하기 위해 지불되는 가격은 여전히 매우 무겁습니다. 구조적 관점에서 볼 때 구조는 상대적으로 비대하지만 각 노드는 필수적이고 간소화될 수 없습니다. 그렇지 않으면 유연성이 발생합니다. 충분하지 않습니다.
실제 응용 프로그램에서는 많은 설계자가 이 레이아웃 구조를 좋아하지 않고 중복된다고 생각할 수 있습니다.
완벽한 9개의 정사각형 그리드 디자인은 3개의 레이어로 분리된 구조여야 합니다. 제가 달성하고 싶은 이상적인 9개의 정사각형 그리드는 다음과 같아야 합니다.
따라서 이 기사에서는 이 레이아웃을 가능한 이상 이상적인 상태에 가깝게 만들어 다양한 측면에서 적용하기에 더 적합하도록 노력하겠습니다.
첫 번째와 두 번째 사항에 대해 유연성을 유지하고 간소화된 효과를 얻으려면, 즉 "케이크도 먹고 싶다면" js 캡슐화를 사용하는 것 외에는 다른 방법이 없습니다. 이것은 일종의 "귀를 숨기고 종을 훔치는" 접근 방식이라고 말할 수 있습니다. 예, JS로 캡슐화하는 이 방법은 본질적으로 구조를 단순화하지 않고 동적 방법을 사용하여 캡슐화한다는 점을 인정해야 합니다. 구조를 생성하지만 중복된 HTML 구조에 즉각적인 영향을 미치며 모든 중복 구조는 한 번에 보이지 않습니다.
3층 분리 접근 방식을 통해 9각형 그리드를 개선하는 방법을 알아봅시다.
구조층 :
이것이 우리가 최대한 간소화하고자 하는 핵심 영역입니다. js를 사용하여 해당 구조를 동적으로 생성하므로 현재 구조는 다음과 같이 가장 독창적인 구조여야 합니다.
첫 번째 9각형 상자
두 번째 9각형 상자
세 번째 9각형 상자
내가 수정한 유일한 수정 사항은 각 상자에 다른 ID를 추가하는 것이었습니다. 이렇게 하면 나중에 다른 색상을 만들기 위해 스타일 시트가 호출할 수 있는 고리가 남습니다. 이 ID를 사용하여 스타일 시트에 다양한 그림이나 색상 스타일을 만듭니다.
div 컨테이너에 class="box"만 추가하면 9개의 정사각형 그리드 레이아웃이 성공적으로 생성됩니다. 이것은 충분히 간단합니다!
스타일 레이어:
지금은 스타일(다른 ID)을 사용자 정의하는 획기적인 지점을 구조 레이어에 묻어 스타일 작성이 더 쉬워졌습니다. 다양한 스타일을 얻기 위해 스타일을 변경해야 하는 9개 위치 모두의 스타일을 재정의하고 재설정합니다.
물론 배경에 다른 그림을 적용할 수도 있습니다. 데모의 편의를 위해 색상 값을 지정했을 뿐입니다. 구체적인 인터페이스 스타일은 디자인 기술에 따라 다릅니다.
/*색 구성표 1*/
#one .t_l{배경:파란색;}
#one .t_r{배경:파란색;}
#one .t_m{배경:주황색;}
#one .m_l{배경:주황색;}
#one .m_r{배경:주황색;}
#one .b_l{배경:파란색;}
#one .b_r{배경:파란색;}
#one .b_m 범위{배경:주황색;}
#one .context{배경:#666;}
/*색 구성표 2*/
#두 .t_l{배경:빨간색;}
#두 .t_r{배경:빨간색;}
#두 .t_m{배경:검은색;}
#두 .m_l{배경:검은색;}
#두 .m_r{배경:검은색;}
#두 .b_l{배경:빨간색;}
#두 .b_r{배경:빨간색;}
#두 개의 .b_m 범위{배경:검은색;}
#두 개의 .context{배경:#999;}