Maîtriser CSS : Motif de fond à rayures verticales

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS. Le but de ce laboratoire est d'introduire les apprenants aux bases de la mise en forme des pages web avec CSS. À la fin de ce laboratoire, les apprenants auront une compréhension solide de la manière d'utiliser CSS pour créer des pages web visuellement attrayantes.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic 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{{"Motif de fond à rayures"}} css/colors -.-> lab-35244{{"Motif de fond à rayures"}} css/width_and_height -.-> lab-35244{{"Motif de fond à rayures"}} css/backgrounds -.-> lab-35244{{"Motif de fond à rayures"}} end

Motif de fond à rayures

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Ce code crée un motif de rayures verticales sur un fond blanc.

Pour créer le motif :

Définissez la propriété background-color sur blanc.
Utilisez background-image avec une valeur linear-gradient() pour créer une rayure verticale.
Définissez la propriété background-size pour spécifier la taille de chaque rayure.
Définissez background-repeat sur repeat pour permettre au motif de remplir l'élément.

Notez que la largeur et la hauteur fixes de l'élément sont uniquement à des fins de démonstration.

Voici un extrait de code d'exemple :

<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;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Motif de fond à rayures. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.