Stileinstellung für die HTML-Bildlaufleiste-CSS-Tutorial-php.cn

Stileinstellung für die HTML-Bildlaufleiste

php中世界最好的语言

Freigeben： 2017-11-22 13:33:37

Original

4108 Leute haben es durchsucht

Wenn Sie eine Bildlaufleiste für DIV festlegen müssen, müssen Sie möglicherweise den Stil der Bildlaufleiste horizontal oder vertikal festlegen. Sie müssen overflow-y und overflow- verwenden. x um es festzulegen. Heute werde ich Ihnen etwas über diese beiden Eigenschaften erzählen.

Legen Sie Bildlaufleisten für das Div fest und legen Sie dessen horizontale und vertikale Bildlaufleistenstile fest. Die erforderlichen CSS-Stile sind overflow-y und overflow-x, um die Effekte der rechten und unteren Bildlaufleiste des Div-Box-Objekts festzulegen. Gleichzeitig können Sie auch CSS-Stile verwenden, um die Bildlaufleiste des HTML-Frame-Iframes auszublenden.

overflow-y:scroll zeigt immer die vertikale Bildlaufleiste an

overflow-y: sichtbar: Inhalt nicht ausschneiden. Keine vertikale Bildlaufleiste hinzufügen

Instanz zum Festlegen der Bildlaufleiste in div

Durch Festlegen von div-Breite, div-Höhe, div-Rahmenstil für das erste DIV-Objekt und Fügen Sie dem DIV-Feld Demonstrationstextinhalte hinzu. Legen Sie für das zweite Feld denselben CSS-Stil und denselben Textinhalt fest und legen Sie horizontale und vertikale Bildlaufleisten fest, um den Effekt zu beobachten.

Das erste Box-CSS heißt „divcs5-a“ und der zweite DIV-Box-Stil-Selektor heißt „div-b“.

1. Der spezifische vollständige HTML-Quellcode lautet wie folgt:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>div滚动条 在线演示 </title> 
<style> 
.div-a,.div-b{ width:150px; height:100px; float:left; border:1px solid #F00} 
.div-b{ margin-left:10px;overflow-y:scroll; overflow-x:scroll;} 
/* css注释说明：设置第二个盒子与第一个盒子间距为10px，并设置了横纵滚动条样式 */ 
</style> 
</head> 
<body> 
<div class="div-a">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</div> 
 
<div class="div-b">测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容
测试内容测试内容测试内容测试内容测试内容</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. Stellen Sie die beiden Felder mit Bildlaufleistenstilen ein, sodass kein Überlauf auftritt. Die vertikale rechte Seite (Y) verfügt über einen Bildlaufleistenstil, der nach unten und oben gezogen werden kann Dies liegt daran, dass der Textinhalt nicht gestreckt werden kann. Wenn es sich um ein

Bild

handelt, das größer als die DIV-Einstellungsbreite ist, wird ein Bildlaufleisteneffekt angezeigt horizontaler Boden (X). Verwandte Empfehlungen:

So legen Sie den Linkstil mit CSS fest

Verwendung checkbo in HTML So ändern Sie das HTML-Titel-Tag-Element mit

Das obige ist der detaillierte Inhalt vonStileinstellung für die HTML-Bildlaufleiste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!