Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: alefaletti en 01 de Abril 2017, 19:27
-
Respuesta al ejercicio CU01049D del curso básico de desarrollo web con CSS usando Notepad++ como editor
#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0;}:
Define familia tipografica, elimina simbolo y coloca margenes en 0 (internos como externos),en cada etiqueta en la lista "ul".
#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}
Define a cada "li" como flotante posicionandose a la izquierda, margin top y bottom 0 e izquierda y derecha 0.15em (espacio vertical entre cada "li")
borde de 5px; estilo groove y color del mismo.
#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;}
Define color de fondo de cada link, la altura del mismo y la altura de linea, posiciona cada link flotante hacia la derecha, ancho de 9em;
cada link sera de tipo block; con borde 0.1em, sólido y color #dcdce9, color de texto, sin decoración y alineado al centro.
#nav-menu li a:hover {background-color: #FF6347;}
Define el color al pasar el mouse por la etiqueta
-
Buenas alefaletti.
Te faltaría la descripción sobre la parte html. También tendrías que explicar correctamente los selectores css, por ejemplo:
#nav-menu ul {..}, Hace referencia a las listas no ordenadas que estén dentro de un elemento que tenga como id, nav-menu.
Faltarían los demás.
Saludos. ;D
-
Descripcion CSS:
<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;}
/* Define la familia tipografica de la lista ul, elimina los símbolos de viñeta y ubica la lista con margenes externos e internos en 0px*/
#nav-menu li {float: left;margin: 0.0.15em; border: 5px groove #FFAA33 ;}
/* Cada etiqueda li se situara de manera horizontal (una a lado de la otra), define margen externo (laterales, arriba y abajo) , el estilo, grosor y color del borde. de las etiquetas*/
#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;}
/*Define el color de cada link, su altura, y el espacio entre lineas (lo cual se podria mencionar como el margen top a partir del cual se posiciona el texto interno), situa los links de manera horizontal, define largo, hace que el elemento se muestre como caja block, deine borde, estilo y color del mismo, quita la decoracion (el subrayado de todo link) y situa el texto en el centro de la caja*/
#nav-menu li a:hover {background-color: #FF6347; }
/*al pasar el mouse por el link modifica el color original*/
</style>
</head>
Descripcion HTML
<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>
<!-- Define un div con id “nav-menu”, dentro del mismo se realiza una lista ul con id “navlist”, el primer li con id “active” y link hacia vuestra pagina. Lo mismo en los demas “li” pero id.-->
</body>
</html>
-
Hola alefaletti.
Ya tenías abierto un tema con la solución de este ejercicio, he movido tu última solución propuesta para que esté con el anterior y te pido que intentes no crear dos o más veces la misma solución.
Sobre la resolución al ejercicio te sigo diciendo lo mismo que te respondí la primera vez que publicaste una respuesta a este ejercicio.
Te faltaría la descripción sobre la parte html. También tendrías que explicar correctamente los selectores css, por ejemplo:
#nav-menu ul {..}, Hace referencia a las listas no ordenadas que estén dentro de un elemento que tenga como id, nav-menu.
Faltarían los demás.
Saludos. ;D
-
Pedro muchas gracias! Va mi nuevo intento:
<html>
<head><title>Portal web - aprenderaprogramar.com</title> /*Define el titulo de la pestaña*/
<meta charset="utf-8"> /* Etiqueta con la que nos aseguramos que el navegador conocerá la codificación de caracteres utilizada*/
<style type="text/css"> /*Define los estilos en el mismo HTML*/
/*Curso CSS aprenderaprogramar.com*/
#nav-menu ul {font-family: sans-serif; list-style: none; padding:0;margin:0;}
/* Define la familia tipografica de la lista no ordenada "ul" que se encuentre dentro de un id de nombre "nav-menu". Elimina los símbolos de viñeta y ubica la lista con margenes externos e internos en 0px*/
#nav-menu li {float: left;margin: 0.0.15em; border: 5px groove #FFAA33 ;}
/* Define que cada etiqueda "li" que este dentro de un id de nombre "nav-menu" se situara de manera horizontal (una a lado de la otra), con el valor del margen externo (laterales, arriba y abajo) , el estilo, grosor y color del 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;}
/*Define el color de cada link (dentro de un id con nombre "nav-menu"), su altura, y el espacio entre lineas (lo cual se podria mencionar como el margen top a partir del cual se posiciona el texto interno), situa los links de manera horizontal, define largo, hace que el elemento se muestre como caja block, deine borde, estilo y color del mismo, quita la decoracion (el subrayado de todo link) y situa el texto en el centro de la caja*/
#nav-menu li a:hover {background-color: #FF6347; }
/*al pasar el mouse por el la etiqueta "li a" dentro de un id con nombre "nav-menu" modifica el color original pasando al #FF6347 */
</style>
</head>