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: 16

Visitas el mes pasado: 12

logo

Donativos

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




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







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