사실 CSS 미닫이문이라는 개념은 몇 년 전부터 등장했지만 최근 들어 더 자주 언급되고 있습니다. 하지만 사람들은 종종 탭 효과와 혼동하는 경우가 많습니다. 특히 일부 초보 친구들에게는 도움이 되기를 바라면서 여기에 자세한 설명을 작성하겠습니다.
말하자면 미닫이 문은 정교한 기술이 아니라 단지 CSS 기술일 뿐입니다. 일부 효과를 얻기 위해 배경 이미지의 중첩과 슬라이딩을 사용합니다. 가장 일반적인 것은 둥근 모서리 탐색입니다. 왼쪽과 오른쪽에 하나씩 두 개의 둥근 모서리 배경을 두 개의 슬라이딩 도어로 상상해 볼 수 있습니다. 두 개의 슬라이딩 도어는 서로 겹쳐서 더 적은 양의 콘텐츠를 표시할 수 있습니다. 기타. 아래와 같이 열어서 더 많은 콘텐츠를 표시합니다.
이전 튜토리얼에서는 배경 이미지를 하나는 넓고 다른 하나는 좁은 두 부분으로 자르는 것을 좋아했는데 실제로는 하나의 이미지로 충분합니다.
여기서는 "a"와 "span"이라는 두 개의 태그만 사용합니다. 스타일은 세 가지 상태를 정의할 수 있는 가장 간단한 방법이라고 할 수 있습니다.
| 인용된 내용은 다음과 같습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <머리> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>제목 없는 문서</title> <스타일> 본문 {글꼴 크기:12px;} .nav {여백:0 자동; 텍스트 정렬:중심; 글꼴-가중치:굵게:3px 솔리드 #579cc6;} .nav a {display:inline-block; margin:0 3px; height:25px; background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) 왼쪽 하단 패딩-왼쪽:15px 색상:#666; 텍스트 장식:없음; 커서:포인터;} .nav 범위 {display:inline-block; line-height:25px; background:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) 오른쪽 하단 패딩 없음: 15px;} .nav a:hover {배경:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) 왼쪽 상단 no-repeat color:#FFF;} .nav a:hover 범위 {배경:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) 오른쪽 상단 no-repeat;} .nav a.set {배경:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) 왼쪽 상단 no-repeat color:#FFF } .nav a.set 범위 {배경:url( https://images.downcodes.com/u/info_img/2009-05/30/0158361.jpg ) 오른쪽 상단 no-repeat;} </style> </head> <본문> <div 클래스="탐색"> <a class="set" href="#"><span>홈페이지</span></a> <a href="#"><span>카테고리 1</span></a> <a href="#"><span>분류</span></a> <a href="#"><span>더 길어질 수도 있습니다</span></a> <a href="#"><span>환영합니다</span></a> <a href="#"><span>내 블로그</span></a> </div> </body> </html> |