Un exemple de barre de navigation centrée automatiquement et les problèmes associés DIV+CSS_CSS/HTML

C'est une barre de navigation que je viens de réaliser. Afin de centrer les quatre LIEN, je l'ai faite comme ça, mais après l'avoir terminée, j'ai trouvé beaucoup de problèmes, je vais l'écrire et la partager avec tout le monde !

Tout d’abord, jetons un œil à cette barre de navigation !

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>tester zishu</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">Page d'accueil</a></li> <li><a href="http://www.kijiji.cn/fabu" target="_blank">Publier les informations</a></li> <li><a href="http://www.kijiji.cn/wo/xxgl" title="在这里可以管理已经发布的信息和个人资料" target="_blank">Ma collection clients</a></li> <li><a href="http://blog.kijiji.com.cn/help/" target="_blank">Aide</a></li> </ul> </div> <p><a href="http://www.zishu.cn" target="_blank">www.zishu.cn Zishu</a>2006-09-11 tôt le matin</p>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Question :
1. Le bug spatial apparaît dans mon FIREFOX je ne sais pas pourquoi Si les points LI ne sont pas écrits sur la même ligne, un problème va survenir. exécutez le code ci-dessus!

2. La petite différence entre IE et FIREFOX (voir l'image ci-dessous) Si vous n'aviez pas remarqué cette petite différence, vous n'écririez pas padding : 6px 15px 5px 15px, et vous ne l'écririez jamais. faites-le. Connectez la ligne verticale du milieu aux lignes supérieure et inférieure ! (Il y a des différences encore plus petites entre IE6 et IE7)


3 La ligne #nav li a{margin:1px;} est-elle inutile ? Si vous le pensez, supprimez-le et essayez-le, voyez si cela fonctionne !

4. La page se terminera lors d'un zoom sur une certaine heure. Utilisez min-width dans FIREFOX pour résoudre le problème, mais min-width n'est pas reconnu dans IE, vous ne pouvez donc utiliser que : expression((documentElement). .clientWidt..... Voici la solution ! Je ne l'ai pas ajouté au code ci-dessus. Si vous ne voulez pas casser la ligne, remplacez simplement la ligne #nav ci-dessus par :

Code du programme.

Copier le code Le code est le suivant :

#nav{height:24px border-bottom:1px; solide #D28A05 ; bordure supérieure : 1 px solide #D28A05 ; image d'arrière-plan : url (nav_bg.jpg); couleur d'arrière-plan : #FF9900 ; clientWidth < 400) ? "400px" : "auto" );}

En gros, il y a beaucoup de problèmes dans ce domaine, il est recommandé de le faire vous-même. je trouve beaucoup de problèmes !
De plus : ce blog sera moche dans FIREFOX, alors contentez-vous de ça.
Encore une chose : il y aura inévitablement des problèmes avec ce que j'ai écrit. n'importe lequel, je serai très heureux si vous les signalez