Ejercicio resuelto CU01049D del tutorial sobre fundamentos de la programación web con CSS.
Menú horizontal CSS o vertical. Crear menús con efectos a partir de listas CSS. Código ejemplos (CU01049D)
Aquí esta el código que interpretare:
Código
<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>
INTERPRETACIÓN
Se puede ver en el documento HTML que hay un divisor <div id="nav-menu">, dentro de el se encuentra una lista no ordenada <ul id="navlist">, en el varios elementos li, cada uno con un link propio <a>, el primero de ellos lleva una id con valor "active".
Luego están las hojas de estilos que lleva interno el documento HTML:
#nav-menu ul {font-family: sans-serif; list-style: none; padding: 0;margin: 0; }. La lista no ordenada que este dentro de un elemento que lleve id="nav-menu" tendrá de fuente sans-serif, no tendra viñetas y no tendra relleno o margen alguno.
#nav-menu li {float: left;margin: 0 0.15em; border: 5px groove #FFAA33 ;}. Aquí los elementos li que estén dentro de un elemento con id="nav-menu", flotara a la izquierda; tendrá un margen a la derecha de 0.15em; un borde de 5px de grosor, con estilo groove y sera de color #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;}. Los vínculos que estén dentro de un elemento li que a su vez este dentro de un elemento con id="nav-menu", tendrá un color de fondo #FFC0CB; dos veces su altura normal; la linea que ocupe sera dos veces mas alto; flotara hacia la izquierda; será 9 veces mas ancho; se comportara como un elemento block; tendrá un borde con 0.1em de grosor, estilo solido y de color #DCDCE9; el color de la fuente sera #0D2474; se anulara el subrayado y el texto se alineara al centro.
#nav-menu li a:hover {background-color: #FF6347; }. A los vínculos que esten dentro de un elemento li que a su vez este dentro de un elemento con id="nav-menu", cambiara su color de fondo a #FF6347 apenas el mouse se muestre encime de el.
Tema: HTML y CSS Interpretación de código qué significa nav-menu ul li etc CU01049D (Leído 3209 veces)
RSS -
WAP2