Utilizamos cookies propias y de terceros para mejorar la experiencia de navegación, y ofrecer contenidos y publicidad de interés.
Al continuar con la navegación entendemos que se acepta nuestra política de cookies.
Iniciar sesión Cerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta

Código de CSS - Menú horizontal con estilos

<<>>
Imágen de perfil

Menú horizontal con estilosgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 26 de Julio del 2007 por Administrador
38.612 visualizaciones desde el 26 de Julio del 2007. Una media de 105 por semana
Ejemplo de un menú horizontal utilizando únicamente estilos.

Versión 1
estrellaestrellaestrellaestrellaestrella(3)

Publicado el 26 de Julio del 2007gráfica de visualizaciones de la versión: Versión 1
38.613 visualizaciones desde el 26 de Julio del 2007. Una media de 105 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- http://www.lawebdelprogramador.com --> <html> <head> <title>Menu horizontal con estilos utilizando 'ul' y 'li'</title> <style type="text/css"> <!-- #menu { font-family: Arial; font-size: 0.8em; } #menu li { /* Indicamos que la posición de 'li' sea adjunte siempre a la izquierda */ float: left; /* Eliminamos las marcas que genera el li como pueden ser las redonadas o recuadros */ list-style-type: none; } /* Por defecto ul genera una separación hacia la derecha. con margin:0 queda anulada */ #menu ul { margin: 0; padding: 0; } #menu a { display: block; text-decoration: none; color: #6643ff; background: #f0edff; padding: 3px 10px 3px 10px; text-align: center; border: 1px solid #6643ff; /* Pintamos las lineas de todos los lados, excepto el izquierdo */ border-width: 1px 1px 1px 0; } /* El primer recuadro, no tiene la linea izquierda. Aqui se la colocamos */ #menu a#primero { border: 1px solid #6643ff; } #menu a:hover { background: #d6ccff; } --> </style> </head> <body> <h1 style="font-size:1em">Menu horizontal con estilos utilizando 'ul' y 'li'</h1> <div id="menu"> <ul> <li><a href="#" id="primero">Cursos</a></li> <li><a href="#">Temas</a></li> <li><a href="#">Codigo</a></li> <li><a href="#">Noticias</a></li> <li><a href="#">Contactar</a></li> </ul> </div> <br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p> </body> </html>

Comentarios sobre la versión: Versión 1 (3)

29/08/2010Arturo Cuauhtémoc
estrellaestrellaestrellaestrellaestrella
Utilicé el código y me dió resultado inmediatamente. Ya habia intentado con otro código, sin éxito. Estoy agradecido.
16/02/2011syx
estrellaestrellaestrellaestrellaestrella
exelente explicacion, facil y sencillo
22/02/2012jose
estrellaestrellaestrellaestrellaestrella
muy bueno, muy practico

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración del curso
Comentarios