LabEx
EntrerRejoindre

Techniques CSS pour des designs visuellement attrayants

Beginner

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

Introduction

Dans ce laboratoire, nous plongerons dans le monde de la programmation CSS et explorerons diverses techniques pour améliorer la conception et la mise en page des pages web. Grâce à une série d'exercices et de défis, vous apprendrez à utiliser les sélecteurs, les propriétés et les valeurs CSS pour styliser les éléments HTML et créer des pages web visuellement attrayantes. À la fin du laboratoire, vous aurez acquis une solide base en programmation CSS et serez en mesure d'appliquer vos nouvelles connaissances pour créer des sites web incroyables.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Donut Spinner

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour indiquer le chargement du contenu, créez un donut spinner avec une bordure semi-transparente pour tout l'élément. Excluez un côté pour servir d'indicateur de chargement du donut. Ensuite, définissez et utilisez une animation appropriée, en utilisant transform: rotate() pour faire tourner l'élément. Voici un exemple de code en HTML et 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;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Summary

Félicitations! Vous avez terminé le laboratoire Donut Spinner. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.