Está en la página 1de 36

Notas de HTML Y

CSS 8
POSICIONAMIENTO AVANZADO
EJERCICIO

Crear una carpeta “advanced-positioning”


Colocar en la carpeta “advanced-positioning” el archivo “schemes.html”
Crear el documento “styles.css“
Descargar las imagenes y colocarlas en la carpeta “images”,
dentro de la carpeta “advanced-positioning”
POSICIONAMIENTO AVANZADO
ELEMENTOS POSICIONADOS
POSICIONAMIENTO RELATIVO
POSICIONAMIENTO RELATIVO

Modificar el documento “styles.css“


POSICIONAMIENTO RELATIVO
POSICIONAMIENTO RELATIVO
POSICIONAMIENTO ABSOLUTO
POSICIONAMIENTO ABSOLUTO

Modificar el documento “styles.css“


POSICIONAMIENTO ABSOLUTO
POSICIONAMIENTO ABSOLUTO
POSICIONAMIENTO ABSOLUTO

Modificar el documento “styles.css“


POSICIONAMIENTO ABSOLUTO
POSICIONAMIENTO ABSOLUTO (RELATIVO)
POSICIONAMIENTO ABSOLUTO (RELATIVO)

Modificar el documento “styles.css“


POSICIONAMIENTO ABSOLUTO (RELATIVO)
POSICIONAMIENTO FIJO (FIXED)
POSICIONAMIENTO FIJO (FIXED)

Modificar el documento “styles.css“


ANIMACIÓN

Modifique el archivo “schemes.html” de la siguiente manera:


ELEMENTOS POSICIONADOS PARA MENÚS
ELEMENTOS POSICIONADOS PARA MENÚS

Descargue el archivo “menu.html”.

Descargue el archivo “styles-menu.css”.


ELEMENTOS POSICIONADOS PARA MENÚS
ELEMENTOS POSICIONADOS PARA MENÚS

Modifique el archivo “styles-menu.css”.


ELEMENTOS POSICIONADOS PARA MENÚS
ELEMENTOS POSICIONADOS PARA MENÚS

Modifique el archivo “menu.html”.


ELEMENTOS POSICIONADOS PARA MENÚS

Modifique el archivo “styles-menu.css”.


ELEMENTOS POSICIONADOS PARA MENÚS
ELEMENTOS POSICIONADOS PARA MENÚS

Modifique el archivo “styles-menu.css”.


ELEMENTOS POSICIONADOS PARA MENÚS

Modifique el archivo “styles-menu.css”.


ELEMENTOS POSICIONADOS PARA MENÚS
Z-INDEX
Z-INDEX

Modifique el archivo “styles-menu.css”.


Z-INDEX
PSEUDO-CLASES PARA MENÚ DROPDOWN

Modifique el archivo “styles-menu.css”.

También podría gustarte