Encabezados de Sección Pegajosos: Mejora la Experiencia del Usuario con CSS

Introducción

En este laboratorio, exploraremos el mundo del CSS y sus capacidades creando una lista con encabezados pegajosos para cada sección. El objetivo es mostrar cómo utilizar la propiedad position: sticky para crear una interfaz de usuario amigable que mejore la experiencia del usuario. A través de este laboratorio, aprenderás a utilizar CSS para crear páginas web visualmente atractivas y funcionales.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Lista con Encabezados de Sección Pegajosos

index.html y style.css ya se han proporcionado en la VM.

Para crear una lista con encabezados pegajosos para cada sección, siga estos pasos:

Permita que el contenedor de la lista (<dl>) desborde verticalmente utilizando overflow-y: auto.
Pegue los encabezados (<dt>) en la parte superior del contenedor estableciendo su posición en pegajosa y aplicando top: 0.
Utilice el siguiente código HTML y CSS:

HTML:

<div class="container">
  <dl class="sticky-stack">
    <dt>A</dt>
    <dd>Argelia</dd>
    <dd>Angola</dd>

    <dt>B</dt>
    <dd>Benín</dd>
    <dd>Botswana</dd>
    <dd>Burkina Faso</dd>
    <dd>Burundi</dd>

    <dt>C</dt>
    <dd>Cabo Verde</dd>
    <dd>Camerún</dd>
    <dd>República Centroafricana</dd>
    <dd>Tchad</dd>
    <dd>Comoras</dd>
    <dd>Congo, República Democrática del</dd>
    <dd>Congo, República del</dd>
    <dd>Costa de Marfil</dd>

    <dt>D</dt>
    <dd>Yibuti</dd>

    <dt>E</dt>
    <dd>Egipto</dd>
    <dd>Guinea Ecuatorial</dd>
    <dd>Eritrea</dd>
    <dd>Eswatini (anteriormente Suazilandia)</dd>
    <dd>Etiopía</dd>
  </dl>
</div>

CSS:

.container {
  display: grid;
  place-items: center;
  min-height: 400px;
}

.sticky-stack {
  background: #37474f;
  color: #fff;
  margin: 0;
  height: 320px;
  border-radius: 1rem;
  overflow-y: auto;
}

.sticky-stack dt {
  position: sticky;
  top: 0;
  font-weight: bold;
  background: #263238;
  color: #cfd8dc;
  padding: 0.25rem 1rem;
}

.sticky-stack dd {
  margin: 0;
  padding: 0.75rem 1rem;
}

.sticky-stack dd + dt {
  margin-top: 1rem;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio de Lista con Encabezados de Sección Pegajosos. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.