Heim > Artikel > Web-Frontend > Stileinstellung für die HTML-Bildlaufleiste

Stileinstellung für die HTML-Bildlaufleiste

php中世界最好的语言Original: 2017-11-22 13:33:374159Durchsuche

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>

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!

Stellungnahme：

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

Vorheriger Artikel：So verwenden Sie die CSS-SchriftstärkeNächster Artikel：So verwenden Sie die CSS-Schriftstärke

In Verbindung stehende Artikel

Mehr sehen