Tutorial- Imágenes con HTML- CSS

Tutorial- Imágenes con HTML y CSS

En este Tutorial- Imagenes con HTML- CSS verá cómo hacer mapas interactivos con html y css.

Para iniciar con el Tutorial- Imágenes con HTML- CSS, lo primero que necesita es un HTML, una hoja de estilos y un grupo de imágenes, ademas de iconos que irán en correspondencia con los mismos; abrir el html, también puede abrirlo con cualquier otro editor como sublime text, seguidamente abrir las hojas de estilo con el mismo programa, todo ello para iniciar esta en blanco y para lo cual necesita un estructura, dicha estructura básica debe ser de html.

Lo que sigue es crear cuatro imágenes, que son cuatro espacios y cuando avance por los cuatro espacios, una imagen estará ahí, cuando este pasando por los espacios una imagen aparecerá;ingresar nuevamente a html para crear unos tips y generar unas clases para cada espacio, una vez ello crear un principal, colocar cada uno de ellos en los estilos, en el espacio colocar un border y un ancho para que no sea pesado el código; las características que comparten cada uno de ellos es mejor hacerlo en un solo lugar, esto para no hacer las tareas repetitivas, proceder dando un ancho y alto especifico, puede hacer cambios para que las filas no aparezcan apiladas, sino una lado de otra, que flote a la izquierda, también agregar overflow para que los elementos que se encuentren fuera no se integren a los mismos;puede realizar los mismos cambios para principal para que estén aislados unos de otros y ademas añadir un margen en la parte superior de 50 pixeles, de igual manera un margen en la parte inferior,ello le da el espacio para poder sentir la diferencia.

En cada espacio podría generar un background, más su URL que seria la de la imagen,además con el nombre de su icono correspondiente. png, enseguida en su pagina le aparecerán los cambios realizados,como su ubicación correspondiente.


Puede ver el Tutorial- Imágenes con HTML- CSS a continuación:

Visita nuestros cursos en el siguiente sitio web, haciendo clic AQUÍ

También puede ver nuestro canal de Youtube


SUSCRIPCIÓN

Loading

MIS REDES SOCIALES

AUSPICIADORES