LabEx
LoginBeitreten

Anfängerhandbuch zu den CSS-Grundlagen

Beginner

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

Einführung

In diesem Lab werden wir die Grundlagen der CSS-Programmierung erkunden. Dieses Lab ist dazu gedacht, Anfängerinnen und Anfängern zu helfen, mit CSS zu beginnen und zu lernen, wie es verwendet werden kann, um schöne und reaktive Webseiten zu erstellen. Im Laufe des Labs werden wir verschiedene Themen wie Selektoren, Eigenschaften und Werte behandeln und praktische Übungen anbieten, um die Konzepte zu vertiefen.

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 95% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Dreieck

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

Um eine dreieckige Form mit reinem CSS zu erstellen, folgen Sie diesen Schritten:

  1. Verwenden Sie drei Bordüren mit der gleichen border-width (20px), um die dreieckige Form zu erstellen.
  2. Setzen Sie die border-color der gegenüberliegenden Seite, wohin das Dreieck zeigt, auf die gewünschte Farbe. Die angrenzenden Bordüren sollten eine border-color von transparent haben.
  3. Um die Größe des Dreiecks anzupassen, ändern Sie die border-width-Werte.

Hier ist ein Beispielcodeausschnitt:

<div class="triangle"></div>

.triangle {
  width: 0;
  height: 0;
  border-top: 20px solid #9c27b0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}

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 Dreieck-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.