LabEx
LoginBeitreten

CSS-Stylegrundlagen für die Webentwicklung

Beginner

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

Einführung

In diesem Lab werden wir die CSS-Programmierung erkunden, indem wir verschiedene Techniken anwenden, um HTML-Elemente zu gestalten. Durch praktische Übungen werden wir lernen, wie Selektoren, Eigenschaften und Werte verwendet werden, um visuell ansprechende Webseiten zu erstellen. Am Ende dieses Labs werden Sie ein solides Verständnis von CSS haben und es auf Ihre eigenen Webentwicklungsprojekte anwenden können.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 89% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Kreis

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

Um eine kreisförmige Gestalt mit reinem CSS zu erstellen, verwenden Sie die Eigenschaft border-radius: 50%, um die Kanten des Elements zu krümmen. Stellen Sie sicher, dass Sie sowohl width als auch height auf den gleichen Wert setzen, um einen perfekten Kreis zu gewährleisten. Wenn unterschiedliche Werte verwendet werden, wird stattdessen eine Ellipse erstellt. Hier ist ein Beispielcodeausschnitt:

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, 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 Kreis-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.