Cómo crear: Cabecera responsiva

Aprende cómo crear una cabecera responsiva usando CSS.

Crear cabecera responsive

Primer paso - Añadir HTML:

<div class="header">
  <a href="#default" class="logo">LogoDeLaCompañía</a>
  <div class="header-right">
    <a class="active" href="#home">Inicio</a>
    <a href="#contact">Contacto</a>
    <a href="#about">Acerca de</a>
  </div>
</div>

Segundo paso - Añadir CSS:

/* Establecer el estilo de la cabecera usando fondo gris y algunos márgenes internos */
.header {
  desbordamiento: oculto;
  fondo: color: #f1f1f1;
  relleno: 20px 10px;
}
/* Establecer el estilo de los enlaces de título */
.header a {
  flotar: izquierda;
  color: negro;
  alineación: centro;
  relleno: 12px;
  decoración: texto: none;
  tamaño: 18px;
  altura: 25px;
  radio: 4px;
}
/* Establecer el estilo del enlace de logo (por favor, tenga en cuenta que establecemos la altura de la línea y el tamaño de la fuente en el mismo valor para evitar que la cabecera aumente cuando la fuente aumenta) */
.header a.logo {
  tamaño: 25px;
  fuente: negrita;
}
/* Cambiar el color de fondo al pasar el ratón */
.header a:hover {
  fondo: color: #ddd;
  color: negro;
}
/* Establecer el estilo de los enlaces activos/actuales */
.header a.active {
  fondo: color: dodgerblue;
  color: blanco;
}
/* Flotar la parte de los enlaces hacia la derecha */
.header-right {
  flotar: derecha;
}
/* Añadir consulta de medios para lograr la respuesta - Cuando el ancho de la pantalla sea de 500px o menos, los enlaces se apilarán juntos */
@media pantalla y (ancho Máximo: 500px) {
  .header a {
    flot: none;
    display: bloque;
    alineación: izquierda;
  }
  .header-right {
    flot: none;
  }
}

亲自试一试

相关页面

教程：CSS 导航栏