Créer des sections défilantes horizontales en CSS-tutoriel CSS-php.cn

Créer des sections défilantes horizontales en CSS

WBOY

Libérer： 2023-08-29 09:29:09

avant

1092 Les gens l'ont consulté

Créer des sections défilantes horizontales en CSS

Les sections à défilement horizontal sont un modèle de conception Web courant utilisé pour afficher du contenu qui dépasse la largeur de la fenêtre d'affichage. Ce modèle de conception permet aux utilisateurs de faire défiler horizontalement, offrant ainsi un moyen unique et attrayant d'afficher de grandes images, galeries, chronologies, cartes et autres contenus. Ceci est réalisé en utilisant des propriétés CSS telles que overflow−x: auto ou overflow−x: scroll.

Cela utilise la fonctionnalité native du navigateur pour le défilement horizontal et est réactif sur tous les appareils. Permet une navigation et une exploration faciles du contenu. Il ne nécessite aucune bibliothèque ou plugin supplémentaire.

Algorithme

Utilisez la classe "conteneur" pour définir les éléments du conteneur.
Définissez la propriété "overflow−x" du conteneur sur "auto" pour activer le défilement horizontal.
Définissez la propriété "white−space" du conteneur sur "nowrap" pour empêcher les sections de passer à la ligne suivante.
Utilisez la classe pour définir l'élément section pour "section".
Définissez la propriété "display" de chaque section sur "inline−block" pour les faire apparaître côte à côte.
Définissez la propriété "width" de chaque section sur "100vw" pour définir la largeur de chaque section sur toute la largeur de la fenêtre.
Définissez la propriété "hauteur" de chaque section sur "80vh" pour définir la hauteur de chaque section à 80 % de la hauteur de la fenêtre d'affichage.
Ajoutez une marge à droite de chaque section en utilisant la propriété « margin−right ».
Utilisez l'attribut « vertical−align » pour aligner le haut de chaque section avec le haut du conteneur.
Placez l'élément section à l'intérieur de l'élément conteneur.

Exemple

 <!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>

Copier après la connexion

Cela peut également être réalisé grâce au défilement vertical traditionnel avec pagination ou onglets pour séparer le contenu en différentes sections. Utilisez une disposition en grille ou en boîte flexible pour afficher le contenu de manière réactive et visuellement attrayante sans recourir au défilement horizontal.

Conclusion

Gardez les directives suivantes à l'esprit lors de la conception :

Faites simple : évitez de remplir chaque domaine d'informations. Concentrez-vous sur l’énoncé des points clés de manière succincte et claire.
Utilisez des visuels accrocheurs : pour engager votre public et rendre votre section plus divertissante, utilisez des photos, des vidéos ou des animations de premier ordre.
Utilisez un design cohérent : pour produire une apparence générale homogène, assurez-vous que chaque zone a un design cohérent.
Fournir une navigation : permettez aux utilisateurs de se déplacer facilement entre les sections d'une page à défilement horizontal. Pour les faire bouger, vous pouvez ajouter des flèches, des points et des connexions de navigation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!