LabEx
LoginBeitreten

Visuell ansprechende Web-Layouts gestalten

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 wir visuell ansprechende Webseiten erstellen. Durch eine Reihe von Übungen und Herausforderungen erhalten Sie praktische Erfahrungen mit CSS-Selektoren, -Eigenschaften und -Werten und werden darin bewandert, HTML-Elemente zu gestalten. Am Ende des Labs werden Sie über die Fähigkeiten und Kenntnisse verfügen, um schöne und responsive Web-Layouts zu erstellen.

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.

Isometrische Karte

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

Um eine isometrische Karte zu erstellen, verwenden Sie transform mit rotateX() und rotateZ(), zusammen mit einer box-shadow. Sie können auch eine transition hinzufügen, um die Karte zu animieren und einen Lift-Effekt zu erzeugen, wenn der Benutzer darüber hovern.

Hier ist ein Beispiel-Codeausschnitt:

<div class="isometric-card"></div>

.isometric-card {
  margin: 0 auto;
  transform: rotateX(51deg) rotateZ(43deg);
  transform-style: preserve-3d;
  background-color: #fcfcfc;
  will-change: transform;
  width: 240px;
  height: 320px;
  border-radius: 2rem;
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    28px 28px 28px 0 rgba(34, 33, 81, 0.25);
  transition:
    transform 0.4s ease-in-out,
    box-shadow 0.3s ease-in-out;
}

.isometric-card:hover {
  transform: translate3d(0px, -16px, 0px) rotateX(51deg) rotateZ(43deg);
  box-shadow:
    1px 1px 0 1px #f9f9fb,
    -1px 0 28px 0 rgba(34, 33, 81, 0.01),
    54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}

Bitte klicken Sie 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 Isometrische-Karte-Lab abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.