Tarea #09: Layout básico con menú

Objetivos

Conocer las técnicas básicas para crear un "layout básico" con menú.
Aprender a colocar las reglas CSS apropiadas para que una web tenga un aspecto genérico.
Entender los conceptos de CSS: "Flex" y "Grid" .

Ejecicio

Basándote en esta plantilla, modifíca los siguientes apartados:

Cambia los colores de las distintas páginas
Cambia la disposición de los contenedores
Añade contenido a cada contenedor
Coloca algún enlace en la barra lateral
Utiliza alguna de las etiquetas HTML estudiadas para personalizar la plantilla
Añade un ítem más al menú, de manera que aparezcan 4 opciones
Crea alguna clase CSS específica y utilízala en alguna de las páginas
Coloca tu nombre en el pie de página


<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Inicio</title>
  <link rel="stylesheet" href="/tic2/css/estilos.css">
</head>

<body class="fondo-1">
  <main>
    <div class="logo"></div>

    <div class="box titulo">
      <h1>Inicio</h1>
    </div>

    <div class="box menu">
      <a href="/tic2/index.html">Inicio</a>
      <a href="/tic2/contacta.html">Contacta</a>
      <a href="/tic2/acerca_de.html">Acerca de</a>
    </div>

    <div class="box barra">
      <h3>barra lateral</h3>
    </div>

    <div class="box contenido">
      <h2>Contenido</h2>
    </div>

    <div class="box pie"><h5>pie de página</h5></div>
  </main>
</body>

</html>

Código CSS


/* 
  HOJA DE ESTILOS GENERALES PARA
  LAYOUT CON MENÚ BÁSICO
  (cc) 3con14 - 11.2019
*/

* { 
  margin    :0; 
  padding   :0; 
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
}

html {
  font: 16px/1.1 Verdana, sans-serif;
}

/* Distintos fondos para páginas */
.fondo-1 {background-color: rgba(70, 131, 180, 0.9);}
.fondo-2 {background-color: rgba(210, 180, 140, 0.9);      }
.fondo-3 {background-color: rgba(91, 156, 37,0.9);    }

/* contenedor FLEX */
body {
  max-width      : 100vw;
  min-height     : 100vh;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

/* contenedor GRID */
main {
  width    : 98vw;
  height   : 98vh;
  max-width: 960px;

  display              : grid;
  grid-template-columns: 25% 75%;
  grid-template-rows   : 100px 50px 1fr 50px;
  grid-template-areas  :'A B'
                        'C C'
                        'D E'
                        'F F';
}

/* ASIGNACIÓN DE ÁREAS A CLASES */
.logo      { grid-area: A; }
.titulo    { grid-area: B; }
.menu      { grid-area: C; }
.barra     { grid-area: D; }
.contenido { grid-area: E; }
.pie       { grid-area: F; }


/* PROPIEDADES GENERALES DE LAS CELDAS GRID */
.box {
  padding          : 1em;
  margin           : 0.1em;
  background-color : hsla(0,100%,100%,0.3);
}
.logo, .menu, .pie {
  overflow: hidden;
}
/* Propiedades particulares de cada tipo de caja */
.pie { 
  padding      : 0.25em;
  margin-bottom: 1em;
}
.logo {
  background     : url(../img/logo.png) center;
  background-size: cover;
  margin         : 5px;
}
.menu {
  text-align: right;
}

/* Propiedades de todas las imágenes */
img {
  max-width: 100%;
  height   : auto;
  display  : block;
  margin   : 0.5em auto;

}

/* Propiedades de los enlaces */
a {
  padding         : 0.5em;
  text-decoration : none;
  border-radius   : 4px;
  background-color: rgba(0,0,0,0.75);
}
a:link, a:visited, a:active {
  color: rgba(255,255,255,0.75);
}
a:hover {
  background-color: rgba(255,255,255,0.75);
  color           : rgba(0,0,0,0.75);
}

Ejemplo de layout (=diseño) básico

Coloca dentro de las etiquetas de cabecera head la siguiente etiqueta:

Comprime, con 7zip, toda la carpeta y guárdala en tu tarjeta de memoria y en una nube (Drive o onDrive) con el nombre t09_layout_basico.7z. Más tarde la enviarás al Aula Virtual.

Etiquetas: 1ª Evaluación, CSS