DIV+CSS 슬라이더 기술 의 간단 한 예

<style type="text/css"> 
#zishu li{ float:left; margin-left:5px; margin-top:50px;} 
.nav_a a:link,.nav_a a:visited{text-decoration:none; display:block; padding-right:10px; background:url(/upload/20073614410846.gif) no-repeat right top;margin-top:3px; color:#000; float:left;} 
.nav_a span{cursor:hand;background-color: #DBF0C4; font-size:14px;background:url(/upload/20073614414862.gif) no-repeat; display:block; line-height:29px; padding-left:10px; cursor:hand; float:left;} 
.nav_a a:hover,.nav_a active{text-decoration:none; display:block; padding-right:10px; background:url(/upload/20073614410846.gif) no-repeat right bottom;margin-top:0px; color:#000} 
.nav_a a:hover span,.nav_a a:active span{background-color: #DBF0C4; font-size:14px;background: url(/upload/20073614414862.gif)  no-repeat  left bottom; display:block; line-height:29px; padding-left:10px; margin-top:0px; padding-top:1px; padding-bottom:2px; cursor:hand;} 
#box{ background:#009900; height:4px; overflow:hidden; clear:both} 
</style>

<ul id="zishu"> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2104&a=21"><span>    </span></a></li> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2107&a=21"><span>    </span></a></li> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2101&a=21"><span>    </span></a></li> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2102&a=21"><span>    </span></a></li> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2105&a=21"><span>    </span></a></li> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2103&a=21"><span>    </span></a></li> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2108&a=21"><span>    </span></a></li> 
  <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2106&a=21"><span>       </span></a></li> 
</ul> 

• 아르바이트 실습
• 차량 매매
• 동성 이벤트
• 가옥 임대 판매
• 동성 인연 찾기
• 벼룩시장
• 개인 서비스
• 학습 및 교육 훈련
[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]설명:1.CSS 는 특별한 최적화 가 없습니다.2.다 자 와 소 자 를 자동 으로 적응 할 수 있 습 니 다.예 를 들 어 학습 과 교육 훈련 은 7 글자 입 니 다.3.그림 두 장 을 사 용 했 습 니 다.왼쪽 한 장,오른쪽 한 장;4.마 우 스 를 올 려 뛰 는 효과 추가 하기;5.이 예 는 복잡 하지 않 고 초보 자 에 게 적합 하 다.만약 네가 이 색채 가 현묘 하지 않다 고 생각한다 면,너 는 이 예 를 좀 볼 수 있다. 그렇게 지도 모른다,아마,아마...  타 오 바 오 홈 페이지 내 비게 이 션 바 레이아웃 효과 모방