Creando contenido Parte 2 - nav

 

Ahora configuramos la parte de los menús de navegación, para eso vamos a utilizar:

<ul>  listas no ordenadas

<li>   lista de ítems

<lo>  listas ordenadas

Creamos una lista no ordenada.

Le añadimos elementos a la lista con <li>

A la lista le ponemos el elemento <a>, para crear el enlace en href, pondremos el enlace en lugar de “#”.

Para el ejemplo pondremos varios ítems.

Esto se vería así.

Pero nosotros no queremos que se vea vertical, lo queremos en horizontal, para esto ya tenemos que trabajar los estilos, lo primero que hacemos es eliminar el punto que hay delante de cada elemento de la lista.

Buscamos el apartado nav{ } y a continuación ponemos nav ul{ }

Ahora le ponemos un color blanco a las letras.

Le quitamos la línea que tiene de decoración cada elemento de la lista.

Ahora lo ponemos en horizontal, para ello a la lista le ponemos float left.

Para separar los elementos de la lista le damos padding en el apartado nav a{ }

Podemos también cambiar el tipo de letra, esto lo hacemos en nav a{ } con Font-family

Para elegir el tipo de letra un truco es ir a un documento de Word buscar los tipos de letra y copiar el nombre.

Y lo pego en el css.

En otro apartado veremos como importar tipos de fuente de Google.

Como las letras están muy pegadas a la parte superior le ponemos de margen alto 15px.

Con esto damos por finalizada la introducción a un menú de navegación sencillo, más adelante trabajaremos con menús desplegables y les daremos un poco más de estilo.