Unidad 17. Ejercicio: Controles de Fondo


Objetivo

Practicar el uso de controles de fondo.

Ejercicio

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo estilolibreria.css.

4 Al estilo que le aplicamos al body en ejercicios anteriores le añadiremos una nueva propiedad donde estableceremos un fondo de imagen que se repita en el eje horizontal y se posicione en la parte inferior de la página:

body {           
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;               
    background: url(imagenes/fondo.gif) repeat-x  bottom;
}              

5 Añadiremos un nuevo estilo para que el bloque con id cabecera muestre una imagen de fondo, que no se repita y además estableceremos que el fondo sea de color blanco:

#cabecera {         
     background-image: url(imagenes/cabecera.jpg); 
     background-repeat: no-repeat;               
     background-color: white;
} 

6 Finalmente modificaremos el estilo del bloque con id menu para añadirle un fondo de imagen que se repita a lo largo del eje horizontal:

#menu {   
    font-size: 13px; 
    letter-spacing: 1px;
    background: url(imagenes/fondo_menu.gif) repeat-x;
}        

7 Queremos que el fondo de los elementos del submenu sean de otro color. Además, queremos completar el estilo ya definido para que cuando el cursor esté encima del enlace, cambie de color:

#menu li li {   
    background-color: #E35331;
}
#menu li ul a:hover { 	
    text-decoration: none;
    background-color: #C2FCF3;
}

8 Guarda los cambios.


Marzo-2015
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.