Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: EnigmaticNerd en 24 de Septiembre 2017, 00:11
-
Buenas tardes. Este es el enunciado del ejercicio CU01049D del tutorial pdf de programación web con CSS desde cero:
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).
<html><head><title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
/*Curso CSS aprenderaprogramar.com*/
#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">
<ul id="navlist">
<li id="active"><a href="http://aprenderaprogramar.com" id="current">Inicio</a></li>
<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>
En el código HTML:
<div id="nav-menu">: Define al contenedor que alojará al menú de navegación, como id "nav-menu".
<ul id="navlist">: Define la lista no ordenada que va a constituir el menú con el id "navlist".
<li id="active"><a href="" id="current">...</a></li>: Define un elemento li con id "active" conteniendo un elemento a con id "current".
<li>…</li>: Se crean varios elementos de li dentro de ul y dentro de nav-menu.
</ul> </div>: Se cierran los elementos.
En el código CSS:
#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0; }: Establece el tipo de fuente en toda la lista con la familia genérica san-serif; elimina las viñetas; establece los margenes y los rellenos a 0.
#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}: Posiciona los elementos li de forma flotante hacia la izquierda, les añade margen y les crea un borde.
#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;}: Establece un color de fondo para los elementos a que están dentro de los li; define una altura y anchura específicas para tales elementos, además de un interlineado; les define un borde solido; los dota de color, se les elimina el subrayado y se alinean, de forma que se muestren centrados dentro del elemento li.
#nav-menu li a:hover {background-color: #FF6347;}: Dota de un color de fondo a todos los elementos a dentro de elementos li, cuando se pase el mouse por encima de ellos (se haga hover).
Si tienen correcciones o sugerencias, se las agradeceré enormemente. Gracias.
-
Hola EnigmaticNerd, ejercicio correcto
Saludos