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.

Desde el editor Brackets abre el archivo indice_grid_ini.html.

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>

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;
}

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.

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

Enero-2019 (V 2.0)

Cursos Informática Gratuitos

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