LabEx
EntrarÚnete

Técnicas de CSS para Diseños Visualmente Atractivos

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, profundizaremos en el mundo de la programación CSS y exploraremos diversas técnicas para mejorar el diseño y el formato de las páginas web. A través de una serie de ejercicios y retos, aprenderás a usar selectores, propiedades y valores de CSS para dar estilo a los elementos HTML y crear páginas web visualmente atractivas. Al final del laboratorio, habrás adquirido una sólida base en la programación CSS y serás capaz de aplicar tus nuevos conocimientos para crear sitios web impresionantes.

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.

Girador de Donas

index.html y style.css ya se han proporcionado en la máquina virtual.

Para indicar la carga del contenido, crea un girador de donas con un bordesemi-transparente para todo el elemento. Excluye un lado para servir como indicador de carga de la dona. Luego, define y utiliza una animación adecuada, utilizando transform: rotate() para rotar el elemento. Aquí hay un ejemplo de código en HTML y CSS:

HTML:

<div class="donut"></div>

CSS:

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.donut {
  display: inline-block;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: donut-spin 1.2s linear infinite;
}

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

¡Felicidades! Has completado el laboratorio del Girador de Donas. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.