Heim > Artikel > Web-Frontend > Erstellen Sie horizontal scrollbare Abschnitte in CSS

Erstellen Sie horizontal scrollbare Abschnitte in CSS

WBOYnach vorne: 2023-08-29 09:29:091035Durchsuche

Horizontal scrollbare Abschnitte sind ein gängiges Webdesign-Muster, das zur Anzeige von Inhalten verwendet wird, die über die Breite des Ansichtsfensters hinausgehen. Dieses Designmuster ermöglicht Benutzern das horizontale Scrollen und bietet so eine einzigartige und ansprechende Möglichkeit, große Bilder, Galerien, Zeitleisten, Karten und andere Inhalte anzuzeigen. Dies wird durch die Verwendung von CSS-Eigenschaften wie overflow-x: auto oder overflow-x: scroll erreicht.

Dies nutzt native Browserfunktionen für horizontales Scrollen und reagiert auf allen Geräten. Ermöglicht eine einfache Navigation und Erkundung von Inhalten. Es sind keine zusätzlichen Bibliotheken oder Plugins erforderlich.

Algorithmus

Verwenden Sie die Klasse „Container“, um Containerelemente zu definieren.
Setzen Sie die Eigenschaft „overflow-x“ des Containers auf „auto“, um horizontales Scrollen zu ermöglichen.
Setzen Sie die Eigenschaft „white-space“ des Containers auf „nowrap“, um zu verhindern, dass Abschnitte in die nächste Zeile umgebrochen werden.
Verwenden Sie die Klasse, um das Abschnittselement für „Abschnitt“ zu definieren.
Setzen Sie die „display“-Eigenschaft jedes Abschnitts auf „inline-block“, damit sie nebeneinander angezeigt werden.
Setzen Sie die Eigenschaft „width“ jedes Abschnitts auf „100vw“, um die Breite jedes Abschnitts auf die volle Breite des Ansichtsfensters festzulegen.
Setzen Sie die Eigenschaft „height“ jedes Abschnitts auf „80vh“, um die Höhe jedes Abschnitts auf 80 % der Höhe des Ansichtsfensters festzulegen.
Fügen Sie mit der Eigenschaft „margin−right“ einen Rand rechts von jedem Abschnitt hinzu.
Verwenden Sie das Attribut „vertikal ausrichten“, um die Oberseite jedes Abschnitts an der Oberseite des Containers auszurichten.
Platzieren Sie das Abschnittselement im Containerelement.

Beispiel

 <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Horizontal Scrollable Sections</title>

    <!------------------------- CSS ----------------------->

    <style>

      .container {
        overflow-x: auto; /* Enables horizontal scrolling for the container */
        white-space: nowrap; /* Prevents the sections from wrapping to the next line */
      }

      .section {
        display: inline-block; /* Makes the sections display side-by-side */
        width: 100vw; /* Sets the width of each section to the full viewport width */
        height: 80vh; /* Sets the height of each section to 80% of the viewport height */
        margin-right: 20px; /* Adds a 20px margin to the right of each section */
        vertical-align: top; /* Aligns the top of each section with the top of the container */
      }


    </style>

  </head>
  <body>
    <!-- This is the container that holds the sections -->
    <div class="container">
       <!-- Each section is a div with the "section" class -->
       <div class="section">
        <h2>Section 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="section">
        <h2>Section 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="section">
        <h2>Section 3</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="section">
        <h2>Section 4</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
      <div class="section">
        <h2>Section 5</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </div>
  </body>
  </html>

Dies kann auch durch herkömmliches vertikales Scrollen mit Paginierung oder Tabulatoren erreicht werden, um Inhalte in verschiedene Abschnitte zu unterteilen. Verwenden Sie ein Raster- oder Flexbox-Layout, um Inhalte reaktionsschnell und optisch ansprechend anzuzeigen, ohne auf horizontales Scrollen angewiesen zu sein.

Fazit

Beachten Sie beim Entwerfen die folgenden Richtlinien:

Keep it simple: Vermeiden Sie es, jeden Bereich mit Informationen zu füllen. Konzentrieren Sie sich darauf, die wichtigsten Punkte prägnant und klar darzulegen.
Verwenden Sie auffällige visuelle Elemente: Um Ihr Publikum zu fesseln und Ihren Bereich unterhaltsamer zu gestalten, verwenden Sie erstklassige Fotos, Videos oder Animationen.
Verwenden Sie ein einheitliches Design: Um ein einheitliches Gesamtbild zu erzeugen, stellen Sie sicher, dass jeder Bereich ein einheitliches Design hat.
Navigation bereitstellen: Ermöglichen Sie Benutzern das einfache Wechseln zwischen Abschnitten einer horizontal scrollenden Seite. Um sie zu bewegen, können Sie Pfeile, Punkte und Navigationsverbindungen hinzufügen.

Das obige ist der detaillierte Inhalt vonErstellen Sie horizontal scrollbare Abschnitte in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css auto class display overflow margin 算法

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Drucken Sie zweiseitige Dokumente mithilfe der CSS-EinstellungenNächster Artikel：Drucken Sie zweiseitige Dokumente mithilfe der CSS-Einstellungen

In Verbindung stehende Artikel

Mehr sehen