So verwenden Sie die DIV-Bildlaufleiste-HTML-Tutorial-php.cn

So verwenden Sie die DIV-Bildlaufleiste

php中世界最好的语言

Freigeben： 2017-11-20 15:55:40

Original

1921 Leute haben es durchsucht

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>

Nach dem Login kopieren

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 sollten

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