Un exemple simple de technologie de porte coulissante DIV+CSS_Échange d'expérience

Auteur : zishu
Ce qui suit est une barre de navigation utilisée sur le site KeQiji.

Ce que j'ai écrit cette fois n'est pas directement contrôlé sous forme d'ID dans STYLE. Formulaire CLASSE ;

Copier le code Le code est le suivant :

< style type="text/css">
#zishu li{ float:left; 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 float; :left;}
.nav_a span{cursor:hand;background-color: #DBF0C4; font-size:14px;background:url(/upload/20073614414862.gif) no-repeat; :29px; padding-left :10px; curseur:hand; float:left;}
.nav_a a:hover,.nav_a active{text-decoration:none; (/upload/20073614410846. gif) pas de répétition en bas à droite ; marge-haut : 0px ; couleur : #000}
.nav_a a:hover span,.nav_a a:active span{background-color : #DBF0C4 police ; -size:14px;background : url(/upload/20073614414862.gif) pas de répétition en bas à gauche ; display:block; padding-left:10px; padding-bottom:2px; curseur:main;}
#box{ background:#009900; hauteur:4px; overflow:hidden; clear:both}

Ce qui suit est la partie CORPS :

Copier le code Le code est le suivant :

• Stage à temps partiel


• Ventes de véhicules


• Activités dans la même ville


• Maison à louer et à vendre< ;/span>< /li>
  
• Recherche dans la même ville Yuan


• Marché aux puces


• Service personnel
• Apprentissage et formationFormation< /span>< ;/li>
  

Affichage de l'effet :

<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>Stage </span></a></li> </ul>