Ein Beispiel für eine automatisch zentrierte Navigationsleiste und damit verbundene Probleme DIV+CSS_CSS/HTML

Dies ist eine Navigationsleiste, die ich gerade erstellt habe, um die vier LINKs so zu zentrieren, aber nachdem ich sie fertiggestellt habe, werde ich sie aufschreiben und mit allen teilen!

Werfen wir zunächst einen Blick auf diese Navigationsleiste!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>zishu testen</title> <style> /*zishu.cn*/ *{ margin:0; padding:0;} body{ font-size:12px; font-family:Verdana, "宋体", Arial; margin:100px 0;} a:link,a:visited{color:#000; text-decoration: none;} a:hover,a:active{color:#000;text-decoration: none;background-color: #FEFC6E;} #nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(http://www.zishu.cn/attachments/month_0609/j2006912180.jpg);background-color: #FF9900; text-align:center;} #nav li{ display:inline;border-right:1px solid #C97802;border-left:1px solid #C97802;margin-right:-1px; padding:6px 15px 5px 15px; line-height:25px; border-bottom:0px none; border-top:0px none;} #nav li a{margin:1px;} p{ margin:50px 0; text-align:center; } </style> <div id="nav"> <ul> <li><a href="http://www.kijiji.cn" target="_blank">Homepage</a></li> <li><a href="http://www.kijiji.cn/fabu" target="_blank">Informationen veröffentlichen</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料" target="_blank">Meine Kundensammlung</a></li> <li><a href="http://blog.kijiji.com.cn/help/" target="_blank">Hilfe</a></li> </ul> </div> <p><a href="http://www.zishu.cn" target="_blank">www.zishu.cn Zishu</a> 11.09.2006 am frühen Morgen</p>
[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Frage:
1. Der Space-Bug erscheint in meinem FIREFOX. Ich weiß nicht, warum. Wenn die LI-Punkte nicht in derselben Zeile stehen, können Sie es versuchen Führen Sie den obigen Code aus!

2. Der kleine Unterschied zwischen IE und FIREFOX (siehe Bild unten), Sie würden padding: 6px 15px 5px 15px; Tun Sie es. Verbinden Sie die vertikale Linie in der Mitte mit der oberen und unteren Linie! (Es gibt noch kleinere Unterschiede zwischen IE6 und IE7);


3 Ist die Zeile #nav li a{margin:1px;} nutzlos? Wenn Sie das glauben, löschen Sie es einfach und probieren Sie es aus, um zu sehen, ob es funktioniert!

4. Die Seite wird umbrochen, wenn sie auf eine bestimmte Stunde gezoomt wird. Verwenden Sie „min-width“ in FIREFOX, um das Problem zu lösen, aber „min-width“ wird im IE nicht erkannt, daher können Sie nur Folgendes verwenden: expression((documentElement .clientWidt..... Hier ist die Lösung! Ich habe es nicht zum obigen Code hinzugefügt. Wenn Sie die Zeile nicht unterbrechen möchten, ändern Sie einfach die #nav-Zeile oben in:

Programmcode

Code kopieren Der Code lautet wie folgt:

#nav{height:24px; border-bottom:1px solid #D28A05; border-top:1px solid #D28A05;background-image: url(nav_bg.jpg);background-color: #FF9900; text-align:center;min-width:400px;width: expression((documentElement. clientWidth < 400) ? "400px" : "auto" );}

Es wird empfohlen, dies selbst zu tun Finde viele Probleme!
Außerdem: Dieser Blog wird hässlich sein, also begnüge dich damit!
Eines noch: Es wird zwangsläufig Probleme mit dem geben, was ich geschrieben habe Ich würde mich sehr freuen, wenn Sie sie darauf hinweisen