Heim > Artikel > Web-Frontend > So verwenden Sie die DIV-Bildlaufleiste
So verwenden Sie die DIV-Bildlaufleiste
- php中世界最好的语言Original
- 2017-11-20 15:55:401935Durchsuche
DIV-Bildlaufleisten können an vielen Stellen verwendet werden. Heute werde ich Ihnen beibringen, wie Sie DIV-Bildlaufleisten mit CSS bedienen. So blenden Sie die DIV-Bildlaufleiste ein und aus
Zuallererst Grundkenntnisse in CSS
overflow-y:scroll; Vertikale Bildlaufleiste immer anzeigen
overflow- y:visible: Schneiden Sie den Inhalt nicht aus und fügen Sie keine vertikale Bildlaufleiste hinzu
Weitere Informationen: overflow-y-Handbuch http://www.divcss5.com/shouce/c_overflowy.shtml
overflow-x:scroll; Immer horizontale Bildlaufleisten anzeigen
overflow-x:visible: Inhalte nicht ausschneiden oder horizontale Bildlaufleisten hinzufügen
Weitere Informationen: Überlauf -x Handbuch http://www.divcss5.com/shouce/c_overflowx.shtml
Erfahren Sie mehr über CSS-Überlauf
Beispiel für die Div-Einstellung der Bildlaufleiste
DIVCSS5 Durch Festlegen der Div-Breite, Div-Höhe und des Div-Rahmenstils für das erste DIV-Objekt und Hinzufügen von Demonstrationstextinhalten im DIV-Feld legt das zweite Feld denselben CSS-Stil, denselben Textinhalt und dieselben Sätze fest Beobachten Sie den Effekt, wenn Sie horizontale und vertikale Bildlaufleisten verwenden.
Das erste Box-CSS heißt „divcs5-a“ und der zweite DIV-Box-Stilselektor heißt „divcss5-b“.
1. Der spezifische vollständige HTML-Quellcode lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>div滚动条 在线演示 www.divcss5.com</title>
<style>
.divcss5-a,.divcss5-b{ width:150px; height:100px; float:left; border:1px solid #F00}
.divcss5-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;}
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */
</style>
</head>
<body>
<div class="divcss5-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div>
</body>
</html>Um den Effekt zu beobachten, legen wir für beide DIV-Boxen den gleichen CSS-Stil und den gleichen Textinhalt fest. Legen Sie das DIV-Feld fest, das zweite Feld verfügt über einen Bildlaufleistenstil, sodass es keinen Überlauf gibt. Die vertikale rechte Seite (Y) verfügt über einen Pulldown- und Pullup-Bildlaufleistenstil und die horizontale Unterseite (X) hat einen Der Bildlaufleisteneffekt kann jedoch nicht nach links oder rechts gezogen werden. Da der Textinhalt die Breite des DIV nicht erweitern kann, wird am horizontalen unteren Rand (X) ein Bildlaufleisteneffekt angezeigt ).
Wie verstecke ich also die CSS-Div-Bildlaufleiste?
DIV verfügt standardmäßig nicht über Bildlaufleisten. Wenn ein Bildlaufleistenstil hinzugefügt wird, verschwindet die Bildlaufleiste nach dem Entfernen natürlich. Wenn es sich um eine Bildlaufleiste handelt, die im Frame
Iframe angezeigt wird und Sie die Bildlaufleiste horizontal ausblenden möchten, können Sie die Bildlaufleiste mit dem CSS-Stil overflow-y:visible oder overflow-y:hidden ausblenden. Wie Sie die DIV-Bildlaufleiste ein- und ausblenden können, erfahren Sie oben.
Verwandte Lektüre:
Einige Details, die beim Layout von div+css beachtet werden solltenWie man DIV+ lernt CSS und der Lernweg Zusammenfassung und Weitergabe von Namenskonventionen für HTML und DIV+CSS (Sammlung)Das obige ist der detaillierte Inhalt vonSo verwenden Sie die DIV-Bildlaufleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!