Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

13. El pie de página (II)

13.2 Estilo de flechas.

Posición del div

En el paso anterior hemos colocado un div en el pie de página con un texto y unas flechas. ahora debemos posicionarlo a la izquierda, mediante la propiedad float: left que aplicaremos al div "flechas".

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

......
#contenidos p { text-align: justify ; padding : 0.5em 3em; text-indent: 3em; }

#flechas  { float: left; margin: 5px 15px; }

Una vez escrito el texto, 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

Hemos colocado el div "flechas" a la izquierda del pie de página y le hemos puesto un margen que impide que se quede pegado a los márgenes de la página. Ahora vamos a cambiar el estilo del texto.

Estilo del texto

Para cambiar el estilo del texto abrimos el archivo general.css con el HTML-Kit y después de la última línea escribimos la siguiente: (escribir texto en verde)

......
		 
#flechas  { float: left ; margin: 10px; }	 
#flechas p { font-size: 0.9em; font-weight: bold; font-family: Europa; }

Como ves, hemos cambiado el tamaño y el tipo de letra, y hemos puesto el texto en negrita.

Una vez escrito el texto, 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

Hemos cambiado ahora el texto que está sobre los enlaces. seguiremos con los enlaces:

Estilo de enlaces

como no vamos a cambiar el color cuando pase por encima ni vamos a poner nada distinto en ninguna pseudoclase, pondremos solo un selector de enlace: Abre el archivo general.css con el HTML-Kit y después de la última línea escribimos la siguiente: (escribir texto en verde)

......
		 
#flechas  { float: left ; margin: 10px; }
#flechas p { font-size: 0.9em;font-weight: bold;font-family: Europa; }	 
#flechas a { font-size: 1.1em; font-weight: bold; font-family: Europa;
          text-decoration: none ; color: green; }

En los enlaces hemos aplicado el mismo estilo de texto que en el párrafo pero con la letra un poco más grande, y además le hemos quitado el subrayado y hemos cambiado el color.

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

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

Nos queda ahora reducir el tamaño de la imagen y quitarle el borde que tiene alrededor.

Estilo de la imagen

para reducir el tamaño de la imagen usaremos las propiedades, width (ancho) y heigh (alto). Al reducir la imagen también haremos subir el texto de los enlaces. Deberemos también quitar el borde que tienen siempre por defecto las imágenes en los enlaces, eso lo conseguiremos con la propiedad border: 0

Abrimos el archivo general.css con el HTML-Kit y y después de la última línea escribimos la siguiente: (escribir texto en verde)

......
		 
#flechas  { float: left ; margin: 10px; }
#flechas p { font-size: 0.9em;font-weight: bold;font-family: Europa; }
#flechas a  { font-size: 1.1em; font-weight: bold; font-family: Europa;
           text-decoration: none ; color: green; }
#flechas a img  { width: 36px; height: 24px; border: 0;}

Una vez escrito el texto anterior guardamos el archivo y después abrimos el archivo plantilla.html con el navegador para ver los cambios.

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

Para completar el pie de página pondremos también un texto con nuestro nombre y nuestro buzon para sugerencias. Pero eso ya será en el siguiente paso.

ir al siguiente paso: nombre y buzón

Página creada por ANYELGUTI.

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

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

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