탭없이 CSS에서 슬라이딩 도어를 사용하는 방법

Cascading Style Sheets는 XML, HTML 또는 XHTML과 같은 마크 업 언어로 작성된 웹 컨텐츠에 스타일을 추가하는 스타일 시트 언어 유형입니다. CSS의 슬라이딩 도어 기술은 두 개의 서로 다른 배경 이미지를 사용하여 동적 효과를 만드는 것에 관한 것입니다. 상단 이미지는 하단 이미지를 덮어 씌우지 않고 환상을 만들기 위해 하단 이미지 위에 배치됩니다. 슬라이딩 도어 기술을 탭없이 구현하는 트릭은 CSS로 디자인 된 목록을 사용하여 텍스트 기반 탐색 요소를 생성하는 것입니다.

1.

먼저 "DIV"태그로 묶인 탐색 요소의 정렬되지 않은 목록을 만듭니다. 예 :

• 홈페이지
• 제품 및 서비스
• 연락처

이 예제에서는 목록에 앵커 및 span 태그가 포함되어 있습니다. 앵커 태그는 "href"속성을 사용하여 탐색 요소의 특정 위치에 연결합니다. 또한 태그를 사용하여 탐색 요소 내의 텍스트 스타일을 제어합니다.

2.

배경 색상을 정의하고, float를 활성화하고, 여백을 지정하고, 오버플로를 자동으로 설정하고, 목록 항목의 목록 스타일을 비활성화하여 스타일 지정을 탐색 요소에 추가합니다. Float은 요소가 왼쪽이나 오른쪽으로 수평으로 이동하여 다른 요소가이 요소를 감쌀 수있게 해주는 CSS 속성입니다. 오버플로 속성은 내용이 사각형 상자를 벗어나 확장 될 경우 객체가 어떻게 동작해야하는지 정의합니다. 오버플로를 auto로 설정하면 오버플로가 숨겨 지지만 스크롤바가 추가되어 오버플로 내용을 볼 수 있습니다.

삼.

선택한 배경 이미지를 앵커 및 스팬 스타일에 적용하여 슬라이딩 도어 기술을 완료하고 탐색 요소에 호버 효과를 적용합니다.