유효한 XHTML 1.1에서 Div 요소가 클릭 가능한 링크처럼 작동하도록 하려면 어떻게 해야 합니까?

유효한 XHTML 1.1을 사용하여 Div를 클릭 가능한 링크로 전환

div를 직접 링크로 전환하는 대신 유지하면서 동일한 기능을 달성할 수 있는 간단한 기술이 있습니다. 유효한 XHTML 1.1:

1. div 만들기 내용: 일반적인 CSS 기술과 유효한 HTML을 사용하여 div를 원하는 대로 디자인합니다.
2. div 내에 링크 포함: 기본값으로 사용할 링크를 div 내에 배치합니다. 사용자가 div를 클릭하면 링크가 연결됩니다.
3. 링크 내부에 빈 범위를 중첩합니다. 링크 내부에 빈 범위 태그를 삽입합니다. ( ) 닫는 슬래시 없이.
4. 위치 할당: div에 상대적: div의 위치 속성을 상대 속성으로 설정합니다.
5. 빈 범위 스타일 지정: 다음 CSS를 빈 범위에 적용합니다. span:

{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  z-index: 1;

  /* Fixes overlap error in IE7/8, ensure you have an empty gif */
  background-image: url('empty.gif');
}

이렇게 하면 div 위에 완전히 덮는 투명한 레이어가 생성됩니다. 범위가 링크 내부에 있으므로 클릭 가능한 영역으로 작동합니다.

6. 다른 링크에 대한 Z-색인 조정(선택 사항): div 내에 추가 링크가 있는 경우, position:relative 및 더 높은 z-index 값(예: 2)을 할당하여 기본 범위 앞에 표시되도록 합니다. link.

이 단계에 따라 유효한 XHTML 1.1 마크업을 유지하면서 접근성과 SEO 최적화를 보장하면서 링크 역할을 하는 div를 만들 수 있습니다.

위 내용은 유효한 XHTML 1.1에서 Div 요소가 클릭 가능한 링크처럼 작동하도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!