Ayer vi una publicación publicada por Goos usando UCWeb: ¿Quién dijo que el menú flotante no se puede centrar horizontalmente? Y un pequeño truco.
Tengo una manera más fácil aquí, primer súbdelo:
En realidad, debería tener otro Div afuera, pero lo dejé para reducir las emisiones de carbono.
Ejecutar el cuadro de código
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
cuerpo {Font-Family: Verdana, Arial, Sans-Serif; Font-Size: 12px; Margen: 120px Auto; Text-Align: Center;}
ul {margen: 0; relleno: 0; estilo list: ninguno;}
#navigation {display: inline-block; borde: sólido 1px rojo; relleno: 20px;}
#navigation li {altura: 30px; float: izquierda;}
#navigation li a {float: izquierda; altura: 30px; line-height: 30px; relleno: 0 23px; fondo:#97c099;}
#navigation li a: hover {fondo:#59c099; color: #ffff;}
</style>
<
<title> sala de menú flotante en un método </title>
</ablo>
<Body>
<ul id = "navegación">
<li> <a href = "#"> Home </a> </li>
<li> <a href = "#"> News </a> </li>
<li> <a href = "#"> store </a> </li>
<li> <a href = "#"> grupo </a> </li>
<li> <a href = "#"> Comunidad </a> </li>
<li> <a href = "#"> ayuda </a> </li>
</ul>
</body>
</html>
[CTRL+A TODOS SELECCIÓN SELECCIÓN: puede modificar primero algún código y luego presione Ejecutar]
Lo más importante es esta oración:
<
Para cuidar la versión inferior de IE, se usan anotaciones condicionales aquí.
La navegación de la puerta corredera evolucionó del código anterior:
Ejecutar el cuadro de código
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
cuerpo {Font-Family: Verdana, Arial, Sans-Serif; Font-Size: 12px; Margen: 120px Auto; Text-Align: Center;}
ul {margen: 0; relleno: 0; estilo list: ninguno;}
#navigation {Display: Inline-Block; Padding: 20px; borde: sólido 1px rojo;}
#navigation li {altura: 30px; float: izquierda;}
#navigation li a {float: izquierda; fondo:#97C099 URL (<a href = ") izquierda no repatel;
#navigation li a span {altura: 30px; float: izquierda; fondos: url (<a href = ") derecho -352px sin repetición; relleno-derecha: 27px; línea de línea: 33px; cursor: manual;}
#navigation li a: hover,#navegación li.current a {fondo de fondo: izquierda -176px; color:#009; fondo de fondo:#8597b5;}
#Navigation Li A: Hover Span,#Navigation Li.Current A Span {Background -Position: Right -528px;}
#navigation li.current a {font-weight: bold;}
</style>
<
<título> Actualización del estilo de puerta deslizante de acuerdo con el código anterior </title>
</ablo>
<Body>
<ul id = "navegación">
<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> grupo </span> </a> </li>
<li> <a href = "#"> <span> Community </span> </a> </li>
<li> <a href = "#"> <span> ayuda </span> </a> </li>
</ul>
</body>
</html>
[CTRL+A TODOS SELECCIÓN SELECCIÓN: puede modificar primero algún código y luego presione Ejecutar]
Entre ellos, es necesario explicar estas dos oraciones para no considerarse redundantes:
#navigation li a {Overflow: Hidden;} /* Oculta el 3px adicional que IE5.5 y 6, ¡no es un error de 3px! Porque altura: 30px; altura de línea: 33px; */
#navigation li un span {cursor: hand;}/* Cuida los errores de que el mouse en el tramo no parece una forma de mano. Además, IE5.5 no admite el cursor: Pointer;
Después de la finalización, la desventaja es que escribir una línea de comentarios condicionales es como la arena en sus ojos para aquellos que tienen la morbilidad XHTML. ¡Jeje!
No se encontraron problemas en Safari4, Chorme, Opera10, IE5.5, 5, 6, 7, FF3.