LabEx
EntrerRejoindre

Fondamentaux de la mise en forme CSS

Beginner

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

Introduction

Dans ce laboratoire, nous allons explorer les bases de la programmation CSS. Vous allez apprendre à utiliser CSS pour styliser les pages web et créer des designs visuellement attrayants. À la fin de ce laboratoire, vous aurez une compréhension solide de la syntaxe CSS, des sélecteurs et des propriétés, et vous serez capable de les appliquer à vos propres projets.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Image en largeur totale

Vous pouvez écrire le code dans index.html et style.css..

Crée une image en largeur totale.

  • Utilisez left: 50% et right: 50% pour positionner l'image au milieu de l'élément parent.
  • Utilisez margin-left: -50vw et margin-right: -50vw pour décaler l'image des deux côtés par rapport à la taille de la fenêtre d'affichage.
  • Utilisez width: 100vw et max-width: 100vw pour dimensionner l'image par rapport à la fenêtre d'affichage.
<main>
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
    eu, faucibus interdum felis.
  </p>
  <p>
    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
  </p>
</main>

main {
  margin: 0 auto;
  max-width: 640px;
}

img {
  height: auto;
  max-width: 100%;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

Sommaire

Félicitations ! Vous avez terminé le laboratoire Image en largeur totale. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.