Skip to content

W
webcolabsoft
Commit b977306f authored by carlos.barrabi's avatar carlos.barrabi
Browse files
Options

Agregando index.html y est-all.css

parent 05d0ede4
Pipeline #293 failed with stages
      Hide whitespace changes
      Inline Side-by-side
      Showing with 68 additions and 0 deletions
      est-all.css 0 → 100644
      View file @ b977306f
      /* 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
      index.html 0 → 100644
      View file @ b977306f
      <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