Menu de lista Plantillas CSS HTML

1. Asignatura:
Diseño Web
Catedrático:
Melvin Quezada
Integrantes del Grupo:
Bessy Arce
Greisy Corea
Sandra Padilla
Alex Martínez
Mauricio Montecinos

2. El menú con lista es maleable con los estilos CSS y
podemos modificar la apariencia de nuestros botones de
manera sencilla y muy rápida.
Se utiliza las listas desordenadas <ul> se caracteriza
por no tener ningún tipo de numeración
<ul>
<li>botón</li>
<li>botón</li>
<li>botón</li>
</ul>
Se visualiza de este modo
• botón
• botón
• botón

3. Utilizando el CSS vamos a modificar la apariencia de
la lista para lograr este menú:
 Crear la lista con el nombre de los botones y los vínculos
correspondientes. Es importante que las listas tengan sus
vínculos.
<ul>
<li><a href=”index.html”>Inicio</a></li>
<li><a href=”quienes.html”>Quienes Somos</a></li>
<li><a href=”servicios.html”>Servicios</a></li>
<li><a href=”contacto.html”>Contáctenos</a></li>
</ul>

4.  Para crear el menú se van a crear tres estilos uno para la
etiqueta ul otro para el compuesto li a y finalmente para el
evento li a:hover.Primero se crea el estilo para la etiqueta
<ul> para darle las características generales al menú.

5.  En la categoría fondo editar las opciones que se muestran. En este
ejemplo el fondo es una imagen que solo debe repetirse
horizontalmente. Esto es opcional depende del diseño del menú.

6.  Determinar la altura, los márgenes y los espacios internos del la
etiqueta. El padding y el margin se colocan en cero para eliminar el
espacio predeterminado que crea el html.

7.  Eliminar los guiones del menú.

8.  Hasta el momento nuestro menú se visualiza de este modo:
El código del css es el siguiente:
ul { margin: 0px; list-style-type: none; list-style-
position: inside; background-image:
url(imagenes/menu02.gif); background-repeat:
repeat-x; padding: 0px; height: 30px;
}

9.  Creo el estilo compuesto li a
Continua haz clic aquí
http://enlacabezadecesar.com/blog/crear-un-
menu-con-lista/