Meister der CSS-Stilgebung: Erhöhen Sie Ihre Web-Designs

Einführung

In diesem Lab werden wir die Grundlagen der CSS-Programmierung erkunden. Sie werden lernen, wie Sie CSS verwenden, um Webseiten zu gestalten und visuell ansprechende Designs zu erstellen. Am Ende dieses Labs werden Sie eine solide Vorstellung von der CSS-Syntax, -Selektoren und -Eigenschaften haben und sie auf Ihre eigenen Projekte anwenden können.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) 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{{"Grundlagen der CSS-Stilgestaltung"}} css/margin_and_padding -.-> lab-35202{{"Grundlagen der CSS-Stilgestaltung"}} css/width_and_height -.-> lab-35202{{"Grundlagen der CSS-Stilgestaltung"}} css/positioning -.-> lab-35202{{"Grundlagen der CSS-Stilgestaltung"}} css/mobile_first_design -.-> lab-35202{{"Grundlagen der CSS-Stilgestaltung"}} end

Vollbild-Bild

Sie können den Code in index.html und style.css schreiben..

Erstellt ein Vollbild-Bild.

Verwenden Sie left: 50% und right: 50%, um das Bild in der Mitte des übergeordneten Elements zu positionieren.
Verwenden Sie margin-left: -50vw und margin-right: -50vw, um das Bild auf beiden Seiten relativ zur Größe der Ansicht zu offsetten.
Verwenden Sie width: 100vw und max-width: 100vw, um das Bild relativ zur Ansicht zu skalieren.

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

Zusammenfassung

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