电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

html的滚动条样式设置

2020-11-30 17:27:28 出处:[ 菜菜电脑网 ] 人气:次阅读
如果所需对DIV设置一个滚动条,那么你也许所需设置滚动条的样式,侧向或者主干,必需用overflow-y和overflow-x来设置,今天就来给大家说道一下这俩个属性。

对div设置滚动条,设置其平行滚动条和垂直滚动条样式。所需CSS样式为overflow-y和overflow-x来设置div盒子对象右侧和底部滚动条效果。同时也可以应用于CSS样式设置html框架iframe的滚动条隐蔽,

overflow-y:scroll; 总是说明了横向滚动条

overflow-y:visible : 不剪切内容也不掺入平行滚动条

div设置滚动条实例

通过对第一个DIV对象设置div宽度、div高度、div边框样式,并在DIV盒子里填充示范文字内容,第二个盒子设置相同的CSS样式,盒子文字内容相同,并设置滑动和侧向滚动条,掩蔽效果。

第一个盒子CSS命名为“divcs5-a”,第二个DIV盒子样式选择器命名为“div-b”。

1、实际原始html源代码如下:

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

为了推论效果我们对两个DIV盒子都设置基础相同的CSS样式和相同的文字内容。对“.div-b”设置了X和y(纵向和交叉的滚动条样式。)

指明:第一个盒子“.div-a”内容过多而倾倒了DIV盒子,第二个盒子设置了滚动条样式,所以很难的水,中轴右侧(Y)显现了可下拉上拉滚动条样式,纵向底部(X)再次出现滚动条效果但不宜左右夹住,这是因为文字内容必须尾端DIV宽度,如果是大于DIV设置宽度的图片这样交叉底部(X)就亦会显现出滚动条效果。

方面破例:

链接样式怎么用CSS设置


HTML里的checkbo怎么运用于


HTML标题标签元素怎么简化

以上就是html的滚动条样式设置的参考内容,更多商量瞩目php中文网其它系统性文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152