LabEx
LoginBeitreten

Punktmuster-Hintergrund

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 und lernen, wie man CSS verwendet, um Webseiten zu gestalten und zu formatieren. Durch eine Reihe von praktischen Übungen werden Sie ein solides Verständnis von CSS-Syntax, Selektoren, Eigenschaften und Werten erwerben und in der Lage sein, optisch ansprechende und reaktionsfähige Webseiten zu erstellen. Am Ende dieses Labs werden Sie eine solide Grundlage in CSS haben und bereit sein, an fortschrittlicheren Webentwicklungsprojekten teilzunehmen.

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

Punktmuster-Hintergrund

index.html und style.css wurden bereits in der virtuellen Maschine (VM) bereitgestellt.

Um ein Punktmuster-Hintergrund zu erstellen, können Sie die folgenden Schritte ausführen:

  1. Setzen Sie die Eigenschaft background-color auf schwarz.
  2. Verwenden Sie die Eigenschaft background-image mit zwei radial-gradient()-Werten, um zwei Punkte zu erstellen.
  3. Geben Sie die Größe des Musters mit der Eigenschaft background-size an. Verwenden Sie background-position, um die beiden Gradienten richtig zu platzieren.
  4. Setzen Sie background-repeat auf repeat.
  5. Beachten Sie, dass die festgelegten height- und width-Werte des Elements nur zu Demonstrationszwecken dienen.

Hier ist ein Beispiel für HTML-Code für ein div-Element mit der Klasse polka-dot:

<div class="polka-dot"></div>

Und hier ist der entsprechende CSS-Code:

.polka-dot {
  width: 240px;
  height: 240px;
  background-color: #000;
  background-image:
    radial-gradient(#fff 10%, transparent 11%),
    radial-gradient(#fff 10%, transparent 11%);
  background-size: 60px 60px;
  background-position:
    0 0,
    30px 30px;
  background-repeat: repeat;
}

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

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Punktmuster-Hintergrund" abgeschlossen. Sie können in LabEx weitere Labs üben, um Ihre Fähigkeiten zu verbessern.