Ejercicios unidad 13: Posicionamiento. Flexbox. Grid



En este ejercicio practicaremos con el posicionamiento en rejilla en una página web. Para realizar este ejercicio utilizaremos el archivo indice_grid_ini.html que puedes descargarte de la carpeta ejercicios/unidad-13/curso-excel/indice_grid_ini.html y guardarlo en la carpeta de ejercicios/curso-excel (o copiar el código que se muestra a continuación). También debes descargarte el archivo de la hoja de estilo indice_grid_ini.css ejercicios/unidad-13/curso-excel/css/indice_grid_ini.css y guardarlo en la carpeta de ejercicios/curso-excel/css (o copiar el código que se muestra a continuación).

Ejercicio 1: Posicionamiento con rejillas.

  1. Desde el editor Brackets abre el archivo indice_grid_ini.html.
  2. Debes ver el siguiente código:

    <!doctype html>
    <html>
      <head>
      <meta charset="utf-8" />
      <title>aulaClic. Índice Excel</title>
      <link href="css/indice_grid_ini.css" rel="stylesheet" type="text/css">
      </head>
    <body>
      <div class="cabeceras">
        <header>
          <img src="graficos/logo_aulaclic.png" id="logo" alt="logo">
         </header> 
         <h1>Excel 2016</h1>
         <nav>
          <p>Atrás  Índice Adelante Inicio  Ayuda</p>
         </nav>
      </div>
      <div class="central">
    	 <main>
            <p>Contenido del curso de Excel 2016</p>
         </main>
         <aside>
            <p>Publicidad </p>
         </aside>
      </div>
      <footer>
         <p>Fecha</p>
         <p>Página</p>
      </footer>
     </body>
     </html>
          
  3. Y la hoja de estilo es esta:
    /* CSS Hoja de estilo. indice_grid_ini.css */
    nav p {
    	  color: brown;
    } footer p {
    color: blue;
    }
    aside p {
    color: darkgreen;
    }
    #logo {
    width: 9em;
    }
    h1 {
    font-size: 1.3em;
    margin-left: 5px;
    margin-right: 10px
    }
    .cabeceras {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: -10px;
    }
    .central {
    display: flex; justify-content: space-between;
    }
    aside {
    margin-left: 1em;
    }
    footer {
    display: flex;
    justify-content: space-between;
    }

  4. El ejercicio consiste en crear una página web con el mismo aspecto visual que ya tiene la página pero utilizando rejillas en lugar de cajas flexibles.
    Ej. propuesto 13

Puedes consultar aquí las soluciones propuestas, primero intenta resolverlo sin ayuda.


Enero-2019 (V 2.0)
Atrás Volver Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.