A continuación dejo mi solución del ejercicio CU01049D del curso CSS desde cero.
Los comentarios están en el mismo código al final.
Lo que pide el ejercicio:
Analiza el código HTML y CSS que mostramos a continuación y realiza una interpretación descriptiva del código, explicando el significado de cada una de sus partes (Nota: como referencia, puedes ver cómo se ha hecho la interpretación descriptiva del código de ejemplo que hemos visto anteriormente).
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web - aprenderaprogramar.com</title>
<style type="text/css">
#nav-menu ul {
font-family: sans-serif;
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li {
float: left;
margin: 0 0.15em;
border: 5px groove #FFAA33;
}
#nav-menu li a {
background-color: #FFC0CB;
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 0.1em solid #DCDCE9;
color: #0D2474;
text-decoration: none;
text-align: center;
}
#nav-menu li a:hover {
background-color: #FF6347;
}
</style>
</head>
<body>
<div id="nav-menu">
<!-- identificamos div como nav-menu mediante el id -->
<ul id="navlist">
<!-- identificamos una lista desordenada como navlist mediante el id -->
<li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
<!-- Identificamos el primer elemento de la lista como activie mediante el id y el primer enlace como current también mediante el id -->
<li><a href="http://aprenderaprogramar.com">Cursos</a></li>
<li><a href="http://aprenderaprogramar.com">Libros</a></li>
<li><a href="http://aprenderaprogramar.com">Divulgación</a></li>
<li><a href="http://aprenderaprogramar.com">Humor</a></li>
</ul>
</div>
</body>
</html>
<!-- 1)Establecemos para la lista una fuente de la familia san-serif, nos deshacemos de las viñetas mediante la propiedad list-style estableciendo su valor como none, el relleno y el margen, de la misma, los quitamos con las valores 0.
2)Para los elementos de la lista establecemos que floten, con un margen superio e inferior igual a 0 y para el derecho e izquierdo a 0.15em. También establecemos un borde de 5px de grosor, que sea de tipo groove con un color #FFAA33.
3)Para los enlaces de la lista establecemos un fondo de color #FFC0CB, que tengan una altura de 2em y con una altura de la línea de 2em igual. Elegimos también que los enlaces floten, que tengan una anchura de 9em y que se vean como bloques. Establecemos un borde de 0.1em de grosor, que sean sólidos y con un color #DCDCE9. El color de los enlaces que ser #0D2474. Nos deshacemos de la línea subrayada mediante la propiedad text-decoration estableciendo su valor a none y centramos el texto de las mismas con la propiedad text-align estableciendo su valor a center.
4) Cuando situemos el ratón encima de los enlaces su fondo de cambiará a color #FF6347 mediante la propiedad :hover.-->RESPUESTA
1) Establecemos para la lista una fuente de la familia san-serif, nos deshacemos de las viñetas mediante la propiedad list-style estableciendo su valor como none, el relleno y el margen, de la misma, los quitamos con los valores 0.
2) Para los elementos de la lista establecemos que floten, con un margen superior e inferior igual a 0 y para el derecho e izquierdo a 0.15em. También establecemos un borde de 5px de grosor, que sea de tipo groove con un color #FFAA33.
3) Para los enlaces de la lista establecemos un fondo de color #FFC0CB, que tengan una altura de 2em y con una altura de la línea de 2em igual. Elegimos también que los enlaces floten, que tengan una anchura de 9em y que se vean como bloques. Establecemos un borde de 0.1em de grosor, que sean sólidos y con un color #DCDCE9. El color de los enlaces que ser #0D2474. Nos deshacemos de la línea subrayada mediante la propiedad text-decoration estableciendo su valor a none y centramos el texto de las mismas con la propiedad text-align estableciendo su valor a center.
4) Cuando situemos el ratón encima de los enlaces su fondo de cambiará a color #FF6347 mediante la propiedad :hover.
Gracias
Tema: Crear efecto cambio color con CSS cuando se pone ratón sobre item menú CU01049D (Leído 2128 veces)
RSS -
WAP2