Visuell ansprechende Designs mit CSS-Techniken

Einführung

In diesem Lab werden wir uns in die Welt der CSS-Programmierung stürzen und verschiedene Techniken zur Verbesserung der Gestaltung und des Layouts von Webseiten erkunden. Durch eine Reihe von Übungen und Herausforderungen lernen Sie, wie Sie CSS-Selektoren, -Eigenschaften und -Werte verwenden, um HTML-Elemente zu gestalten und visuell ansprechende Webseiten zu erstellen. Am Ende des Labs werden Sie einen soliden Grundlagenwissen in der CSS-Programmierung erworben haben und Ihr neues Wissen anwenden können, um atemberaubende Websites zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/DynamicStylingGroup(["Dynamic Styling"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/DynamicStylingGroup -.-> css/animations("Animations") css/DynamicStylingGroup -.-> css/transformations("Transformations") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} css/colors -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} css/borders -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} css/width_and_height -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} css/display_property -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} css/animations -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} css/transformations -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} css/mixins -.-> lab-35192{{"CSS-Techniken für visuell ansprechende Designs"}} end

Donut Spinner

index.html und style.css wurden bereits in der VM bereitgestellt.

Um den Inhaltseintrag anzuzeigen, erstellen Sie einen Donut-Spinner mit einer halbtransparenten Kante für das gesamte Element. Ausschließen Sie eine Seite, um als Ladeindikator für den Donut zu dienen. Definieren und verwenden Sie dann eine passende Animation, indem Sie transform: rotate() verwenden, um das Element zu drehen. Hier ist ein Beispielcode in HTML und 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;
}

Klicken Sie bitte in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Donut-Spinner-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.