LabEx
LoginBeitreten

Vollbild-Element-Styling mit CSS

Beginner

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

Einführung

In diesem Lab werden wir untersuchen, wie man den CSS-Pseudo-Element-Selektor :fullscreen verwendet, um Stile auf ein Element anzuwenden, wenn es im Vollbildmodus ist. Wir werden einen Button mit Element.requestFullscreen() erstellen, um das Element für die Vorschau des Stils in den Vollbildmodus zu versetzen. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie man mit CSS Vollbild-Elemente mit benutzerdefinierten Stilen erstellt.

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.

Vollbild

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

Um ein Element im Vollbildmodus zu gestalten, können Sie den CSS-Pseudo-Element-Selektor :fullscreen verwenden. Sie können auch einen Button erstellen, der das Element für die Vorschau in den Vollbildmodus versetzt, indem Sie einen <button> und Element.requestFullscreen() verwenden. Hier ist ein Beispielcode:

<div class="container">
  <p>
    <em
      >Klicken Sie auf den Button unten, um das Element in den Vollbildmodus zu
      versetzen.
    </em>
  </p>
  <div class="element" id="element">
    <p>Ich ändere die Farbe im Vollbildmodus!</p>
  </div>
  <br />
  <button
    onclick="var el = document.getElementById('element'); el.requestFullscreen();"
  >
    Gehe in den Vollbildmodus!
  </button>
</div>

.container {
  margin: 40px auto;
  max-width: 700px;
}

.element {
  padding: 20px;
  height: 300px;
  width: 100%;
  background-color: skyblue;
  box-sizing: border-box;
}

.element p {
  text-align: center;
  color: white;
  font-size: 3em;
}

/* Für Internet Explorer */
.element:-ms-fullscreen p {
  sichtbarkeit: sichtbar;
}

/* Für moderne Browser */
.element:fullscreen {
  hintergrundfarbe: #e4708a;
  breite: 100vw;
  höhe: 100vh;
}

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 zu Vorschauen.

Zusammenfassung

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