Diseño del sitio web CSS

Un sitio web a menudo se divide en encabezados, menús, contenido y un pie de página:

 

Header

Un encabezado (header) generalmente se encuentra en la parte superior del sitio web (o justo debajo del menú de navegación superior). A menudo contiene un logotipo o el nombre del sitio web:

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Barra de navegación

Una barra de navegación contiene una lista de enlaces para ayudar a los visitantes a navegar por su sitio web.

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Contenido

El diseño de esta sección a menudo depende de los usuarios objetivo. El diseño más común es uno (o combinarlos) de los siguientes:

  • 1 columna (a menudo se usa para navegadores móviles)
  • 2 columnas (a menudo se usa para tabletas y computadoras portátiles)
  • Diseño de 3 columnas (solo se usa para escritorios)

Crearemos un diseño de 3 columnas y lo cambiaremos a un diseño de 1 columna en pantallas más pequeñas:

/* Crea tres columnas iguales que floten una al lado de la otra */
.column {
  float: left;
  width: 33.33%;
}

/* Borrar Floats después de las columnas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Diseño responsive: hace que las tres columnas se apilen una encima de la otra.
uno al lado del otro en pantallas más pequeñas (600 px de ancho o menos) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Ejm completo

Veamos la sintaxis que vamos a utilizar

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

body {
margin: 0;
}

/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}

/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 15px;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>

<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

<div class="row">
<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.
 Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. 
Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. 
Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. 
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. 
Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. 
Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column">
<h2>Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. 
Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. 
Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. 
Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>

</body>
</html>

Columnas desiguales

El contenido principal es la parte más grande e importante de su sitio. Es común con anchos de columna desiguales, por lo que la mayor parte del espacio se reserva para el contenido principal. El contenido lateral (si lo hay) se usa a menudo como una navegación alternativa o para especificar información relevante para el contenido principal. Cambia los anchos a tu gusto, solo recuerda que debe sumar 100% en total:

Ejm

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}