Maîtriser la mise en forme CSS : Améliorez votre conception web

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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/selectors -.-> lab-35202{{"Fondamentaux de la mise en forme CSS"}} css/margin_and_padding -.-> lab-35202{{"Fondamentaux de la mise en forme CSS"}} css/width_and_height -.-> lab-35202{{"Fondamentaux de la mise en forme CSS"}} css/positioning -.-> lab-35202{{"Fondamentaux de la mise en forme CSS"}} css/mobile_first_design -.-> lab-35202{{"Fondamentaux de la mise en forme CSS"}} end

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.