DIV+CSS 슬라이딩 도어 기술의 간단한 예_체험교류

작성자: zishu
다음은 KeQiji 홈페이지에서 사용하는 네비게이션 바입니다.

이번에 작성한 내용은 STYLE에서 ID 형태로 직접 관리되지는 않습니다. CLASS 형식 ;

코드 복사 >

< style type="text/css">

#zishu li{ float:left; margin-top:50px;}
.nav_a a:link. nav_a a:visited{text -장식:none; display:block; padding-right:10px; background:url(/upload/20073614410846.gif) no-repeat 오른쪽 상단;margin-top:3px; :왼쪽;}
.nav_a 범위{커서:손;배경-색상: #DBF0C4; 글꼴 크기:14px;배경:url(/upload/20073614414862.gif) no-repeat; :29px; 왼쪽:10px; 커서:손; 부동:왼쪽;}
.nav_a a:hover,.nav_a 디스플레이:블록:오른쪽 (/upload/20073614410846.gif) 반복 없음 오른쪽 하단;margin-top:0px; color:#000}
.nav_a a:hoverspan,.nav_aa:activespan{Background-color:#DBF0C4; -크기:14px;배경: url(/upload/20073614414862.gif) 왼쪽 하단 반복 없음; line-height:29px; margin-top:0px; padding-bottom:2px; 커서:손;}
#box{ 배경:#009900; 오버플로:숨김: 모두}

다음은 BODY 부분입니다.

코드 복사 코드는 다음과 같습니다.

파트타임 인턴십


차량 판매


동일한 도시 활동


임대 및 매매용 주택< ;/span>< /li>

같은 도시에서 보기 Yuan


벼룩시장


개인 서비스
학습 및 훈련훈련< /span>< ;/li>

효과 표시:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>zishu.cn</title> <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> </ul>