Skip to content

C
css-e002
Switch branch/tag
Find file
Normal viewHistoryPermalink
index.html 2.25 KB
Newer Older
CSS Clase 2
94b4edd7
 
roshka committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml" xml:lang="es" lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        <title>Ejercicio 4 (Introducción a CSS)</title>

    
    <h1 id="" class="title">
        Ejercicio 4
    </h1>

    

<p>Modificar el menú vertical sencillo para que muestre el siguiente comportamiento:</p>

<p>1) Los elementos deben mostrar una imagen de fondo (<code>flecha_inactiva.png</code>):</p>

<div class="figure" id="figure_15_13">
    <img src="./index_files/f0916.gif" alt="Menú vertical con imagen de fondo">

    <p class="caption"><strong>Figura 4.1</strong> Menú vertical con imagen de fondo</p>
</div>


<p>2) Cuando se pasa el ratón por encima de un elemento, se debe mostrar una imagen alternativa (<code>flecha_activa.png</code>):</p>

<div class="figure" id="figure_15_14">
    <img src="./index_files/f0917.gif" alt="Menú vertical con imagen de fondo alternativa">

    <p class="caption"><strong>Figura 4.2</strong> Menú vertical con imagen de fondo alternativa</p>
</div>


<p>3) El color de fondo del elemento también debe variar ligeramente y mostrar un color gris más oscuro (<code>#E4E4E4</code>) cuando se pasa el ratón por encima:</p>

<div class="figure" id="figure_15_15">
    <img src="./index_files/f0918.gif" alt="Menú vertical con imagen de fondo y color alternativos">

    <p class="caption"><strong>Figura 4.3</strong> Menú vertical con imagen de fondo y color alternativos</p>
</div>


<p>4) El comportamiento anterior se debe producir cuando el usuario pasa el ratón por encima de cualquier zona del elemento del menú, no solo cuando se pasa el ratón por encima del texto del elemento (este problema sólo sucede con Internet Explorer 6):</p>

<div class="figure" id="figure_15_16">
    <img src="./index_files/f0919.gif" alt="Aspecto final del menú vertical avanzado creado con CSS">

    <p class="caption"><strong>Figura</strong> Aspecto final del menú vertical avanzado creado con CSS</p>
</div>


                        

</body></html>