Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Reines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden)

青灯夜游
Freigeben: 2018-10-10 16:07:20
nach vorne
3512 Leute haben es durchsucht

Dieser Artikel stellt Ihnen das reine CSS-Handbuch vor (Bildlaufleiste ausblenden). Ich hoffe, dass es für Freunde hilfreich ist.

HTML:

<p class="bigder">
  <p class="big">

    <dl>

      <dt><img src="img/dongtai.png"/></dt>

    </dl>

    <dl>

      <dt><img src="img/dongtai.png"/></dt>

    </dl>   

    <dl>

      <dt><img src="img/dongtai.png"/></dt>

    </dl>   

    <dl>

      <dt><img src="img/dongtai.png"/></dt>

    </dl>   

    <dl>

      <dt><img src="img/dongtai.png"/></dt>

    </dl>

  </p>
</p>
Nach dem Login kopieren

CSS:

.bigder{width: 100%;margin: 0 auto;height: 195px;overflow: hidden;}
.big{overflow-x: scroll;height: 210px; display:flex;justify-content: space-between;}
.bigder dl{background-color: ghostwhite;text-align: center;margin-right: 20px;}
.bigder dl:last-child{padding-right: 0;}
Nach dem Login kopieren

Solange die Breite das übergeordnete Element überschreitet, kann es verschoben werden besteht darin, die Bildlaufleiste und die äußerste Ebene auszublenden. Sowohl die zweite Ebene als auch die zweite Ebene müssen eine feste Höhe haben. Dann ist die äußere Ebene etwas höher als die innere Ebene, die Bildlaufleiste befindet sich unten und dann die äußerste Ebene Ebenenüberlauf: versteckt; das war's

Vergleichsbild:

Vorher:

, Nachher

:

Tatsächlich gibt es einige einfache Methoden, aber sie sind nur auf den -webkit-Kernel beschränkt. Ja, Browser, die C3 unterstützen:

1)::-webkit-scrollbar {/*hide Scrollrad*/Anzeige: keine;

Außerdem, da wir über das Ausblenden von Bildlaufleisten sprechen, möchte ich noch mehr sagen: Ionic verbirgt Bildlaufleisten:

Fügen Sie overflow-scroll="true" zu ion-content und style="overflow hinzu :auto;“ und das war's!

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

CSS-Video-Tutorial

!

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonReines CSS-manuelles Schiebekarussell (Bildlaufleiste ausblenden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!