100%클릭 구역 의 슬라이더 코드 1/2 페이지

BLOG 주소:http://www.planabc.net/article.asp?id=107
표준 을 배 우 는 친구 들 은 보통 공부 하 는 과정 에서 CSS 슬라이딩 도 어 기술 을 접 하 게 됩 니 다.아마 모두 가 이 글 을 본 적 이 있 을 것 입 니 다.만약 에 위의 글 을 접 해 본 적 이 없 거나 아직 본 적 이 없 거나 내용 을 잊 어 버 려 도 괜 찮 습 니 다.위의 글 체인 을 클릭 하여 먼저 알 아 보 거나 복습 할 수 있 습 니 다.
라 는 글 에서 미끄럼 문 예 를 들 어 자세히 실험 한 결과 링크 구역 에 9 픽 셀 의 맹점 이 있어 클릭 할 수 없고 IE 에서 문자 부분의 크기 만 클릭 할 수 있 으 며 전체 버튼 블록 을 클릭 할 수 없다 는 것 을 발견 했다.그리고 우리 가 기대 하 는 것 은 전체 버튼 블록 을 클릭 할 수 있 고 맹점 이 존재 하 는 것 을 허락 하지 않 는 다 는 것 일 수도 있 습 니 다.
그럼 우 리 는 어떻게 실현 해 야 합 니까?다음은 우리 함께 해결 방법 을 토론 합 시다.
우선 편 의 를 위해 서 는 먼저 의 코드 를 옮 깁 니 다.XHTML 부분:

<div id="header"> 
  <ul> 
    <li><a href="#">Home</a></li> 
    <li id="current"><a href="#">News</a></li> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Contact</a></li> 
  </ul> 
</div> 
CSS 부분:

#header { 
  float:left; 
  width:100%; 
  background:#DAE0D2 url("bg.gif") repeat-x bottom; 
  font-size:93%; 
  line-height:normal; 

#header ul { 
  margin:0; 
  padding:10px 10px 0; 
  list-style:none; 

#header li { 
  float:left; 
  background:url("left.gif") no-repeat left top; 
  margin:0; 
  padding:0 0 0 9px; 

#header a { 
  float:left; 
  display:block; 
  background:url("right.gif") no-repeat right top; 
  padding:5px 15px 4px 6px; 
  text-decoration:none; 
  font-weight:bold; 
  color:#765; 

/* Commented Backslash Hack 
   hides rule from IE5-Mac \*/ 
#header a {float:none;} 
/* End IE5-Mac hack */ 
#header a:hover { 
  color:#333; 

#header #current { 
  background-image:url("left_on.gif"); 

#header #current a { 
  background-image:url("right_on.gif"); 
  color:#333; 
  padding-bottom:5px; 

CSS 에서 슬라이더 기술

좋은 웹페이지 즐겨찾기