이전 세 편의 기사 시리즈에서는 9각형 그리드 레이아웃에 대해 자세히 소개했습니다. 기본 레이아웃부터 시작하여 제작 과정에서 겪게 되는 문제점을 하나씩 설명하겠습니다. 이 세 가지 기사는 모두 기본 원칙에 대한 설명입니다. 이 원칙이 올바른지 여부를 입증하는 강력한 적용 사례가 없습니다. 일부 친구는 약간 조바심이 있을 수 있으며 일부 네티즌은 나에게 사례를 제공하도록 요청했습니다. 그래서 이번 글에서는 아주 멋진 선수인 주공게의 사례를 소개하겠습니다.
세 번째 기사 "3개 레이어로 분리된 완벽한 9공 그리드"에서는 중복된 구조를 줄이기 위해 JS를 사용하여 HTML 태그를 캡슐화하는 방법을 소개했지만 이 방법에도 결함이 있습니다. 사용자가 JS를 비활성화하면 구조가 손상될 수 있습니다. 물론 요즘의 인터넷 환경에서는 크게 문제가 되지 않지만, 외국의 일부 웹페이지 디자인을 보면 이런 고려가 필요하다. 이를 위해서는 점진적인 다운그레이드와 기능 약화가 필요하지만 결과는 JS 캡슐화를 사용하지 않는 것과 같습니다. 그러므로 케이크를 갖고 있으면서 먹을 수도 없습니다. 안녕하세요, 이것들은 모두 여담입니다. 우리의 멋진 플레이어 중 하나가 어떻게 디자인되었는지 살펴보겠습니다!
첫인상이 먼저입니다. 모두가 결과를 먼저 보고 싶어합니다. 좋습니다. 먼저 스크린샷을 보여드리겠습니다.
그림 1
일반적으로 이러한 화려한 플레이어의 경우 너비와 높이 값을 동적으로 조정해야 하므로 이러한 그래픽에는 9제곱 그리드를 사용하는 것이 매우 적합한 선택입니다.
물론, 제가 쓴 일련의 기사에서 " 깨지지 않는 구공 그리드 레이아웃 "을 참조하시기 바랍니다. 물론 작업을 더 잘 완료하는 데 도움이 될 수 있는 생산 기술이 아직 남아 있습니다. 예를 들어 CSS 스프라이트 기술(내 다른 기사 " CSS 스프라이트 이미지 배경 최적화 기술 " 참조)은 이미지 요청 수를 효과적으로 줄일 수 있습니다. 일반적으로 9제곱 그리드 레이아웃이 있는 애플리케이션의 경우 더 많은 이미지가 있기 때문입니다. 네 모서리와 네 변을 장식하려면 최소 8장의 그림이 필요합니다. 따라서 어떻게 하면 사진의 수를 줄일 수 있는가는 디자이너들이 고려해야 할 사항이다.
이 예에서는 네 모퉁이 이미지를 하나의 이미지로 병합했으므로 다음과 같아야 합니다.
그림 2
위 그림에서는 모든 사람이 더 자세히 볼 수 있도록 여러 그림의 교차점을 보조선으로 그렸습니다. 그림 위치 지정 원리를 적용하여 네 모서리에 고정했습니다. 이는 스타일 시트에 다음과 같이 정의됩니다.
.t_l{ background:url(../image/round.gif) 반복 없음 왼쪽 상단;}
/*왼쪽 위 모서리*/
.t_r{배경:url(../image/round.gif) 오른쪽 상단 반복 없음;}
/*오른쪽 상단*/
.b_l{배경:url(../image/round.gif) 왼쪽 하단 반복 없음;}
/*왼쪽 하단*/
.b_r{ background:url(../image/round.gif) 오른쪽 하단 반복 없음;}
/*우측 하단*/