Hier, j'ai vu un article publié par Goos en utilisant UCWeb: qui a dit que le menu flottant ne peut pas être centré horizontalement? Et un petit piratage.
J'ai un moyen plus facile ici, montrez-le d'abord:
En fait, je devrais avoir une autre div à l'extérieur, mais je l'ai abandonné afin de réduire les émissions de carbone.
Exécutez la case de code
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<style type = "text / css">
Body {Font-Family: Verdana, Arial, Sans-Serif; Font-Size: 12px; marge: 120px Auto; Text-Align: Center;}
ul {marge: 0; rembourrage: 0; style liste: aucun;}
#Navigation {Affichage: Block en ligne; bordure: solide 1px rouge; rembourrage: 20px;}
#navigation li {hauteur: 30px; float: gauche;}
#navigation li a {float: gauche; hauteur: 30px; line-height: 30px; padding: 0 23px; fond: # 97c099;}
#navigation li a: hover {background: # 59c099; couleur: #ffff;}
</ style>
<! - [Si lte ie 7]> <style type = "text / css"> # navigation {affichage: en ligne;} </ style> <! [endif] ->
<Title> Float Menu Room dans une méthode </TITAL>
</ head>
<body>
<ul id = "navigation">
<li> <a href = "#"> Accueil </a> </li>
<li> <a href = "#"> News </a> </li>
<li> <a href = "#"> Store </a> </li>
<li> <a href = "#"> Groupe </a> </li>
<li> <a href = "#"> Communauté </a> </li>
<li> <a href = "#"> Aide </a> </li>
</ul>
</docy>
</html>
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]
La chose la plus importante est cette phrase:
<! - [Si lte ie 7]> <style type = "text / css"> # navigation {affichage: en ligne;} </ style> <! [endif] ->
Afin de prendre soin de la version inférieure de IE, les annotations conditionnelles sont utilisées ici.
La navigation de porte coulissante a évolué à partir du code ci-dessus:
Exécutez la case de code
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<style type = "text / css">
Body {Font-Family: Verdana, Arial, Sans-Serif; Font-Size: 12px; marge: 120px Auto; Text-Align: Center;}
ul {marge: 0; rembourrage: 0; style liste: aucun;}
#Navigation {affichage: bloc en ligne; rembourrage: 20px; bordure: solide 1px rouge;}
#navigation li {hauteur: 30px; float: gauche;}
#navigation li a {float: gauche; fond: # 97c099 URL (<a href = ") Left supérieur ne repeater; padding-left: 27px; height: 30px; overflow: caché;}
#navigation li a span {height: 30px; float: gauche; fond: url (<a href = ") droite -352px sans répétition; padding-right: 27px; line-height: 33px; curseur: main;}
#navigation li a: hover, # navigation li.current a {background position: gauche -176px; couleur: # 009; fond-couleur: # 8597b5;}
#navigation li a: hover span, # navigation li.current a span {background position: droit -528px;}
#Navigation li.current a {Font-Weight: Bold;}
</ style>
<! - [Si lte ie 7]> <style type = "text / css"> # navigation {affichage: en ligne;} </ style> <! [endif] ->
<Title> Mise à jour du style de porte coulissant en fonction du code ci-dessus </Title>
</ head>
<body>
<ul id = "navigation">
<li> <a href = "#"> <span> home </span> </a> </li>
<li> <a href = "#"> <span> News </span> </a> </li>
<li class = "current"> <a href = "#"> <span> store </span> </a> </li>
<li> <a href = "#"> <span> groupe </span> </a> </li>
<li> <a href = "#"> <span> communauté </span> </a> </li>
<li> <a href = "#"> <span> aide </span> </a> </li>
</ul>
</docy>
</html>
[Ctrl + a tous les conseils de sélection: vous pouvez d'abord modifier du code, puis appuyer sur Run]
Parmi eux, il est nécessaire d'expliquer ces deux phrases afin de ne pas être considérée comme redondante:
#navigation li a {overflow: Hidden;} / * masquer le 3px supplémentaire que IE5.5 et 6, n'est pas un bug 3px! Parce que la hauteur: 30px; hauteur de ligne: 33px; dans IE5.5 et 6, la hauteur est de 33px. * /
#navigation li a span {curseur: main;} / * prendre soin des bugs que la souris sur la portée ne ressemble pas à une forme de main. De plus, IE5.5 ne prend pas en charge le curseur: pointeur; mais ie toutes les versions connaissent le curseur: main; * /
Une fois terminé, l'inconvénient est que la rédaction d'une ligne de commentaires conditionnels est comme le sable dans vos yeux pour ceux qui ont une morbidité XHTML. hehe!
Aucun problème n'a été trouvé dans Safari4, Chorme, Opera10, IE5.5, 5, 6, 7, FF3.