Español
¿Necesita utilizar código CSS para simular la navegación del sitio web techweb? ¡El efecto es casi el mismo que el real!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html" charset=gb2312" /> <style type="text/css" > <!-- #siteNav { claro: ambos; flotante: izquierda; ancho de relleno: 1 px; fondo: #fff; tamaño de fuente: 12 px; -bottom:2px solid #84B0C7; familia de voz: ""}""; familia de voz: heredar; ancho: 749px; #siteNav ul { margen:0; #siteNav li { display:inline; margen:0; padding:0; } #siteNav a { float:left; fondo:url() sin repetición margen superior:0; :none; } #siteNav a span { float:left; display:block; background:url() no-repeat right top; padding:5px 11px 4px 5px } /* Comentado Backslash Hack oculta la regla de IE5; -Mac */ #siteNav a span { float:none } /* Fin del hack de IE5-Mac */ #siteNav a:hover span { color:#036 } #siteNav a:hover { background-position:0% -42px; } #siteNav a: hover span { posición de fondo: 100% -42px; } #siteNav #sel a { posición de fondo: 0% -42px } #siteNav #sel a span { posición de fondo: 100% -42px; } --> </style> <title>Demostración</title> </head> <body> <div id="siteNav"> <ul> <li id="sel"><a href="#" ><span>Página de inicio</span></a></li> <li><a href="#"><span>Información</span></a></li> <li><a href ="#"><span>Personajes</span></a></li> <li><a href="#"><span>Gestión</span></a></li> <li ><a href="#"><span>Operación</span></a></li> <li><a href="#"><span>Finanzas</span></a></ li> <li><a href="#"><span>Tecnología</span></a></li> <li><a href="#"><span>Productos</span></ a></li> <li><a href="#"><span>Red</span></a></li> <li><a href="#"><span>Telecomunicaciones</ li> span></a></li> <li><a href="#"><span>Comentarios</span></a></li> <li><a href="#"> <span >Blog</span></a></li> <li><a href="#"><span>Amigos</span></a></li> <li><a href= "# "><span>Desplazarse</span></a></li> <li><a href="#"><span>Buscar</span></a></li> <li> <a href="#"><span>WAP</span></a></li> </ul> </div> </body> </html>
