Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++


logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 11

Visitas el mes pasado: 24

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




10. La barra de enlaces (II)

10.2. Posición de de enlaces

Separación y bordes

En el paso anterior hemos colocado los enlaces en línea, pero ahora debemos dar una separación entre ellos, y ponerles un borde para diferenciarlos.

Abre el archivo general.css con el HTML-Kit y en la última línea, añadimos las propiedades siguientes (escribir texto en verde):


....
h6  { font-size: 0.9em; }

#navegacion ul li { display: inline; float: left; 
                    width: 200px ;border: 1px solid #ffcc99 ;margin: 3px; }
				

La propiedad width: 200px da una anchura fija de 200 píxeles a cada elemento de la lista, lo que hace que se separen.

Mediante la propiedad border: 1px solid #ffcc99 creamos un borde alrededor de cada elemento de la lista, al cual le damos grosor(1px) estilo (solid) y color(#ffcc99).

Mediante la propiedad margin: 3px pònemos un pequeño margen alrededor de los elementos que hace que el borde se separe entre ellos.

Después de escribir el texto anterior, guardamos el archivo y abrimos el archivo plantilla.html con el navegador para ver los cambios

La página quedará así: Ver mi página


Alinear los enlaces

Los enlaces aparecen ahora cada uno dentro de un recuadro, pero debemos ahora alinear los recuadros superiores e inferiores. Para ello usaremos la propiedad clear para borrar márgenes y alinear los elementos.

Abre el archivo general.css con el HTML-Kit y después de la ultima línea escribimos esta otra: (texto en verde)


....
#navegacion ul li { display: inline; float: left; 
                    width: 200px ;border: 1px solid #ffcc99 ;margin: 3px ;}

#navegacion ul { clear:both; }
		

Después de escribir la línea guardamos el archivo y abrimos después el archivo plantilla.html para ver los cambios.

La página quedará así: Ver mi página


El siguiente paso es dar estilo a los enlaces, para que la letra y el fondo tengan otro aspecto. Pero eso será ya en el siguiente paso.


Ir al siguiente paso: estilo de enlaces







Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com