Beispiel für die CSS-Einstellung des Div-Bildlaufleistenstils

In unserer täglichen Entwicklungsarbeit benötigen viele Seiten die Funktion von Bildlaufleisten, was es für Benutzer bequemer macht, die Seiten der Website zu erleben. Es gibt viele Arten von Bildlaufleisten in DIV, daher stellen wir sie Ihnen heute vor. Unten finden Sie ein Beispiel für das Festlegen des Bildlaufleistenstils eines Div mithilfe von CSS!

Beispiel für den Div-Bildlaufleistenstil

<style type="text/css">
.scroll{
width:100px;
height:200px;
overflow:auto;/*自动出现滚动条，如果要出现竖直滚动条则改成：overflow-y:auto，如果横向出现滚动条则改成：overflow-x:auto*/
scrollbar-face-color:#F00;/*滚动条凸出部分的颜色(前景色),包括两端的方形按钮、水平或竖直滑动的滑块的颜色*/
scrollbar-track-color:#FFF;/*滚动条的背景颜色,如果省略的话将出现虚点，颜色将采用face-color的颜色*/
scrollbar-arrow-color:#FFF;/*按钮(上下或者左右可以点击使滑块滚动的方形按钮)上三角箭头的颜色*/
scrollbar-3dlight-color:#0F0;/*滚动条亮边的颜色,形成3D效果，有层次感，肉眼观察在滚动条左边及上边出现一条有色线（竖直方向滚动）*/
scrollbar-darkshadow-color:#00F;/*滚动条强阴影的颜色,肉眼观察出现滚动条下边及右边*/
scrollbar-highlight-color:#F0F;/*滚动条空白部分的颜色,肉眼观察改变不明显，具体颜色改变出现在左边和上边空白处，介于face-color效果与3dlingt-color效果之间有个空白颜色（默认为白色）。此外，滚动条前景色有种凹陷的感觉，周边线条颜色凸起*/
scrollbar-shadow-color:#006600;/*立体滚动条阴影的颜色，具体出现在滑块及方形按钮的右边及下边，形成阴影效果，颜色介于face-color效果和darkshadow-color效果之间，不是很明显*/
scrollbar-base-color:#0f0;/*滚动条的基本颜色,当前面7个效果出现时，滚动条基本颜色设置肉眼很难观察到，如果不设置前面7个效果,系统将根据base-color自动设置，其中前景色，背景色(虚点表示)颜色一致，其他效果(阴影以黑色填充),没有什么要求时，建议不设置此效果*/
/*
scrollbar-face-color:#F00;
scrollbar-track-color:#FFF;
scrollbar-arrow-color:#FFF;
这3个效果建议必须设置
*/
}
.font{ color:#006600}
</style>
<div class="scroll">
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
  <p>文字内容</p>
</div>

Zusammenfassung:

Dieser Artikel verwendet Beispiele Die Anzeige stellt CSS zum Festlegen des Div-Bildlaufleistenstils vor. Ich hoffe, es wird für Ihre Arbeit hilfreich sein!

Verwandte Empfehlungen:

Codebeispiele für Bildlaufleistenstileinstellungen in CSS (Bild)

CSS So stellen Sie Code und Grafiken ein, die mit dem IE-Bildlaufleistenstil kompatibel sind

Über Div-Bildlaufleisten in HTML Beispiele für Styling

Das obige ist der detaillierte Inhalt vonBeispiel für die CSS-Einstellung des Div-Bildlaufleistenstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!