Commit b977306f authored by carlos.barrabi's avatar carlos.barrabi

Agregando index.html y est-all.css

parent 05d0ede4
Pipeline #293 failed with stages
/* Curso CSS est ilos aprenderaprogramar.com*/
body {font: 62.5%/ 1.2 Arial, Helvetica, sans-serif; background-color: #eee; }
h2 {margin:0;}
/* Caja contenedora*/
#wrap { font-size: 1.8em; width: 520px; padding: 20px;
margin: 0 auto; /* Da lugar al centrado de la caja en el elemento superior body*/
background-color: #fff;}
/* Est ilos que crean el menú desplegable */
/* Eliminamos padding y margin que introducen navegadores por defecto en listas*/
#navbar { padding:0; margin:0; }
/* Elementos items principales de menú que se muest ran siempre*/
#navbar li { list-style: none; float : left ; margin:10px;}
#navbar li a {
display: block; /* Usamos display block para poder aplicar propiedades de caja a links */
padding: 3px 8px; background-color: #5e8ce9; color: #fff;
text-decoration: none; }
/* Listas de subitems de menú*/
#navbar li ul {
display: none; /* La lista inicialmente no se muestra debido a display:none; */
background-color: #69f;}
#navbar li:hover ul {
font-size: 12px;
display: block; /* Al situar el cursor sobre el item la lista de subitems pasa de display none a display block y se muestra*/
position: absolute; /* Al desplegarse el submenú no ocupa espacio y no desplaza a otros elementos gracias a que
establecemos position absolute*/
margin: 0; padding: 0; /* Anulamos margin y padding que por defecto introducen navegadores*/
}
#navbar li:hover li { float : none; } /* Anulamos el float left que define el elemento padre para que los subitems se muestren envert ical */
/* Creamos la apariencia de los subitems de menú, color de fondo, borde inferior, color de texto*/
#navbar li:hover li a { background-color: #69f; border-bottom: 1px solid #fff; color: #000; }
/* Creamos el efecto de cambio de color y aspecto cuando ponemos el puntero del ratón sobre un subitem de menú*/
#navbar li li a:hover { background-color: #8db3ff; }
.limpiador{padding:0; border-style:none; clear:both; } /* Forzamos a la caja a most rarse aún conteniendo elementos flotantes*/
\ No newline at end of file
<html>
<head> <title>Portal web - aprender a programar.com </title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="est-all.css">
</head>
<body>
<div id="wrap" <!-- Caja contenedora -->
<h2>CSS-Menu Desplegable</h2>
<p>aprender a programar.com</p>
<ul id="navbar">
<li><a href="http://aprenderaprogramar.com">Libros</a> <!--Item principal de men-->
<ul> <!--Lista que define subitems de men que se most rarn slo al posicionar el ratn sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Aprender a programar desde cero</a></li> <!--SubItem de men-->
<li><a href="http://aprenderaprogramar.com">Aprender a programar con Joomla</a></li> <!--SubItem de men-->
<li><a href="http://aprenderaprogramar.com">Aprender a programar con Java</a></li> <!--SubItem de men-->
</ul>
</li>
<li><a href"http://aprenderaprogramar.com">Dibulgaci&oacute;n</a> <!--Item principal de men-->
<ul> <!--Lista que define subitems de men que se most rarn slo al posicionar el ratn sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Los 100 trucos de CSS</a></li> <!--SubItem de men-->
</ul>
</li>
<li><a href="http://aprenderaprogramar.com">Preguntas</a> <!--Item principal de men-->
<li><a href="http://aprenderaprogramar.com">Humor</a> <!--Item principal de men-->
<ul> <!--Lista que define subitems de men que se most rarn slo al posicionar el ratn sobre el item principal-->
<li><a href="http://aprenderaprogramar.com">Humor inform&aacute;tico</a></li> <!--SubItem de men-->
<li><a href="http://aprenderaprogramar.com">Humor bases de datos</a></li> <!--SubItem de men-->
<li><a href="http://aprenderaprogramar.com">Humor programaci&oacute;n</a></li> <!--SubItem de men-->
<li><a href="http://aprenderaprogramar.com">Humor universidad</a></li> <!--SubItem de men-->
</ul>
</li>
</ul>
<div class="limpiador"></div> <!--Explicado en apartados anteriores del curso-->
</div>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment