Meisterhaft in CSS: Vertikales Streifen-Hintergrundmuster

Einführung

In diesem Lab werden wir die Grundlagen der CSS-Programmierung erkunden. Das Ziel dieses Labs ist es, die TeilnehmerInnen mit den Grundlagen des Gestaltens von Webseiten mit CSS vertraut zu machen. Am Ende dieses Labs werden die TeilnehmerInnen eine solide Vorstellung davon haben, wie CSS verwendet werden kann, um visuell ansprechende Webseiten zu erstellen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35244{{"Streifen-Hintergrundmuster"}} css/colors -.-> lab-35244{{"Streifen-Hintergrundmuster"}} css/width_and_height -.-> lab-35244{{"Streifen-Hintergrundmuster"}} css/backgrounds -.-> lab-35244{{"Streifen-Hintergrundmuster"}} end

Streifen-Hintergrundmuster

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

Dieser Code erstellt ein vertikales Streifenmuster auf einem weißen Hintergrund.

Um das Muster zu erstellen:

Setzen Sie die Eigenschaft background-color auf weiß.
Verwenden Sie background-image mit einem Wert von linear-gradient(), um ein vertikales Streifenmuster zu erstellen.
Setzen Sie die Eigenschaft background-size, um die Größe jedes Streifens anzugeben.
Setzen Sie background-repeat auf repeat, um das Muster das Element zu füllen.

Beachten Sie, dass die feste width und height des Elements nur zu Demonstrationszwecken sind.

Hier ist ein Beispiel-Codeausschnitt:

<div class="stripes"></div>

.stripes {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(90deg, transparent 50%, #000 50%);
  background-size: 60px 60px;
  background-repeat: repeat;
}

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