Ein einfaches Beispiel für DIV+CSS-Schiebetürtechnologie_Erfahrungsaustausch

Autor: zishu
Das Folgende ist eine Navigationsleiste, die auf der KeQiji-Website verwendet wird.

Was ich dieses Mal geschrieben habe, wird nicht direkt in Form einer ID in STYLE gesteuert KLASSE-Formular. ;

Code kopieren Der Code lautet wie folgt:

< style type="text/css"> 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;background:url(/upload/20073614414862.gif) no-repeat; :29px; padding-left :10px; Cursor:hand; float:left;}
.nav_a a:hover,.nav_a active{text-decoration:none; display:block; (/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; -size:14px;background: url(/upload/20073614414862.gif) no-repeat left unten; padding-left:10px; padding-bottom:2px;cursor:hand;} >
Das Folgende ist der KÖRPER-Teil:

Code kopieren
Der Code lautet wie folgt:

• Teilzeitpraktikum
• Fahrzeugverkauf
• Aktivitäten in der gleichen Stadt
• Haus zu vermieten und zu verkaufen< ;/span>< /li>
• Suche in derselben Stadt Yuan

Flohmarkt

Persönlicher Service

Lernen und TrainingTraining< /span>< ;/li>

Effektanzeige:

<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>Teilzeitpraktikum</span></a></li> <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2107&a=21"><span>Fahrzeugverkauf und -kauf</span></a></li> <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2101&a=21"><span>Stadtveranstaltungen</span></a></li> <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2102&a=21"><span>Haus zu vermieten und zu verkaufen</span></a></li> <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2105&a=21"><span>Auf der Suche nach dem Schicksal in derselben Stadt</span></a></li> <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2103&a=21"><span>Flohmarkt</span></a></li> <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2108&a=21"><span>Pers枚nlicher Service</span></a></li> <li class="nav_a"><a href="http://fenlei.zishu.cn/l.php?c=2106&a=21"><span>Lern- und Schulungstraining</span></a></li> </ul> <div id="box"></div>