Curso de HTML | Pasos

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Maquetación de la estructura básica

1. Empezamos a maquetar de fuera a dentro y de arriba a abajo. En un primer momento, todas las capas deben tener color. El contenido siempre estará agrupado dentro de una columna central (.container), pero a veces esta columna central…

• … no estará dentro de una fila con color:

<style>
.container{
  max-width: 1200px;
  margin: auto;
  background-color: salmon;
  min-height: 100px; /* Cuando esta capa tenga contenido, deberíamos borrar este estilo*/
}
</style>
<div class="container"></div>

• … estará dentro de una fila con color:

<style>
.container{
  max-width: 1200px;
  margin: auto;
  background-color: salmon;
  min-height: 100px; /* Cuando esta capa tenga contenido, deberíamos borrar este estilo*/
}
.container-fluid{
  background: pink;
}
</style>
<div class="container-fluid"> <!-- Por defecto, una capa tiene la altura del contenido y la anchura de la capa que la contiene. Por eso a esta capa no hace falta ponerle width ni height -->
  <div class="container"></div>
</div>

Maquetación de los contenidos

Los contenidos se estructuran utilizando filas y columnas. Para lograr esta estructura, hay muuuuuchas formas. Pero la forma más sencilla es utilizar display flex.

<style>
.row{
  display:flex;
}
.col-red{
  background: red;
  flex: 2; /*Como la capa roja tiene flex 2, su anchura será el doble que el de la capa verde*/
}
.col-green{
  background: green;
  flex: 1;
}
</style>
<div class="container">
  <div class="row">
    <div class="col-red"></div>
    <div class="col-green"></div>
  </div>
</div>