Diseño de sitio web de CSS

Disposición del sitio web

Los sitios web generalmente se dividen en encabezado, menú, contenido y pie de página:

Hay muchos diferentes diseños de disposición disponibles para elegir. Sin embargo, la estructura anterior es una de las más comunes, y la estudiaremos en detalle en este tutorial.

Encabezado

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

Ejemplo

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

Resultados:

Encabezado

Prueba personalmente

Barra de navegación

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

Ejemplo

/* Contenedor del navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Enlaces del navbar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Enlace - cambio de color al pasar el ratón */
.topnav a:hover {
  background-color: #ddd;
  color: negro;
}

Resultados:

Prueba personalmente

Contenido

El tipo de disposición generalmente depende de su usuario objetivo. Los diseños más comunes son uno de los siguientes (o pueden combinarse):

  • 1-columnaDiseño (generalmente utilizado en navegadores móviles)
  • 2-columnasDiseño (generalmente utilizado en tabletas y laptops)
  • 3-columnasDiseño (solo para computadoras de escritorio)

1-columna:

2-columnas:

3-columnas:

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

Ejemplo

/* Crear tres columnas iguales que se flotan uno al lado del otro */
.column {
  float: left;
  width: 33.33%;
}
/* Limpiar flotación después de las columnas */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Diseño de disposición flexible - Hacer que las tres columnas se apilen en lugar de estar alineadas en pantallas más pequeñas (ancho de 600 píxeles o menos) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Resultados:

Guía de referencia completa de tecnología de sitio web

Nuestra guía de referencia cubre todos los aspectos de las tecnologías del sitio web.

Incluye tecnologías estándar de W3C: HTML, CSS, XML. Y otras tecnologías, como JavaScript, PHP, SQL, etc.

Herramienta de prueba de ejemplo en línea

En CodeW3C.com, proporcionamos miles de ejemplos.

Al usar nuestro editor en línea, puede editar estos ejemplos y experimentar con el código.

Método de aprendizaje rápido y fácil

Un tiempo es un dinero, por lo tanto, le proporcionamos contenido de aprendizaje rápido y fácil de entender.

Aquí, puede obtener cualquier conocimiento necesario a través de un modelo fácil de entender.

Prueba personalmente

Consejo:Para crear un diseño de 2 columnas, cambia el ancho a 50%. Para crear un diseño de 4 columnas, usa 25%.

Consejo:¿Quieres saber cómo funciona la regla @media? Lee nuestra Consultas de medios CSS Aprenda más sobre este tema en este capítulo.

Consejo:Una manera más moderna de crear una disposición de columnas es utilizando CSS Flexbox. Sin embargo, Internet Explorer 10 y versiones anteriores no lo admiten. Si necesita soporte para IE6-10, utilice flotadores (como se muestra anteriormente).

Para obtener más información sobre el módulo de disposición de Flexbox flexible, lea nuestra Flexbox CSS Tutoriales.

Columnas desiguales

El contenido principal (main content) es la parte más grande e importante de su sitio web.

Es común que las columnas no tengan el mismo ancho, ya que la mayoría del espacio se reserva para el contenido principal. El contenido adjunto (si hay) se utiliza generalmente como navegación alternativa o información específica relacionada con el contenido principal. Puede cambiar la anchura a su gusto, siempre y cuando recuerde que su suma debe ser del 100%:

Ejemplo

.column {
  float: left;
}
/* Columnas laterales */
.column.side {
  width: 25%;
}
/* Columna media */
.column.middle {
  width: 50%;
}
/* Diseño de disposición flexible - Hacer que las tres columnas se apilen en lugar de estar alineadas */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Resultados:

Guía de referencia completa de tecnología de sitio web

Nuestra guía de referencia cubre todos los aspectos de las tecnologías del sitio web.

Incluye tecnologías estándar de W3C: HTML, CSS, XML. Y otras tecnologías, como JavaScript, PHP, SQL, etc.

Herramienta de prueba de ejemplo en línea

En CodeW3C.com, proporcionamos miles de ejemplos.

Al usar nuestro editor en línea, puede editar estos ejemplos y experimentar con el código.

Método de aprendizaje rápido y fácil

Un tiempo es un dinero, por lo tanto, le proporcionamos contenido de aprendizaje rápido y fácil de entender.

Aquí, puede obtener cualquier conocimiento necesario a través de un modelo fácil de entender.

Prueba personalmente

Pie de página

El pie de página se encuentra en la parte inferior de la página. Generalmente contiene información como derechos de autor y contactos:

Ejemplo

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Resultados:

Pie de página

Prueba personalmente

Diseño de sitio web responsivo

Al usar el código CSS superior, creamos una disposición de sitio web adaptable que cambia entre dos columnas y una columna completa según el ancho de la pantalla:

Prueba personalmente