html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」

html中div滚动条设置,DIV滚动条属性及样式设置方式「建议收藏」这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。DIV滚动条属性及样式设置所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。其功能大…

大家好,又见面了,我是你们的朋友全栈君。

这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。

DIV滚动条属性及样式设置

所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场。其功能大约是为了节约页面空间,就是所谓的“缩地”了。

当div所定义的区域的内容达到一定程度时,在div标签里面嵌入css样式表,定义overflow的属性值,设置DIV滚动条相关的属性。

示例代码:

.testDiv{

border-style:solid;

border-width:50px;

border-color:pink;

position:absolute;

top:200px;

left:300px;

height:200px;

width:300px;

overFlow-x:scroll;

overFlow-y:hidden;

scrollBar-face-color:green;

scrollBar-hightLight-color:red;

scrollBar-3dLight-color:orange;

scrollBar-darkshadow-color:blue;

scrollBar-shadow-color:yellow;

scrollBar-arrow-color:purple;

scrollBar-track-color:black;

scrollBar-base-color:pink;

}

注:

1.overFlow:

visible却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效

scroll总是显示滚动条

hidden没有滚动条,超出区域的内容不可见

auto根据内容自动判断是否添加滚动条

2.DIV滚动条颜色属性:

face-color:滑块颜色

hightlight-color:高亮颜色

3dlight-color:三维光线颜色

darkshadow-color:暗影颜色

shadow-color:阴影颜色

arrow-color:箭头颜色

track-color:滑道颜色

base-color:DIV滚动条的主要颜色,其中包含滚动按钮和滚动滑块

3.overFlow-xoverFlow-y

visible却省值,没有DIV滚动条,根据内容自动扩撑区域的大小,即定义的区域无效

scroll总是显示滚动条

hidden没有DIV滚动条,超出区域的内容不可见

auto根据内容自动判断是否添加滚动条

【编辑推荐】

【责任编辑:程华权 TEL:(010)68476606】

点赞 0

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157997.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • navicat生成激活码错误【2021.8最新】

    (navicat生成激活码错误)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlZ9LZO4ZKWA-eyJsaWNlbnNlSW…

    2022年3月22日
    118
  • oracle 分页查询 优化_oracle分页查询封装

    oracle 分页查询 优化_oracle分页查询封装对于数据库中表的数据的 Web 显示,如果没有展示顺序的需要,而且因为满足条件的记录如 此之多,就不得不对数据进行分页处理。常常用户并不是对所有数据都感兴趣的,或者大部分情 况下,他们只看前几页。 通常有以下两种分页技术可供选择。 1234567Select * from (Select rownumrn,t.* from table t)Where rn>&minnum and rn或者Sel

    2025年7月18日
    6
  • 查看是否安装了webpack_webpack不是内部或外部命令

    查看是否安装了webpack_webpack不是内部或外部命令查看当前项目webpack版本在项目package.json中的scripts脚本命令中写入以下内容”webpack”:”webpack–version”然后打开终端在项目根路径下运行:npmrunwebpack

    2022年8月10日
    26
  • iDB-数据库自动化运维平台

    iDB-数据库自动化运维平台数据库,MySQL,自动化运维,AutoDDL,刷库,帐号授权,审核,回滚提纲:

    2022年5月13日
    130
  • DropDownList1

    DropDownList1循环绑定数据到DropDownList1foreach(SPListlsinweb.Lists){LIColl.Add(ls.Title);//将数据保存list中}dwlist.DataSource=LIColl;//绑定…

    2022年7月18日
    16
  • 双向 LSTM

    双向 LSTM本文结构:为什么用双向LSTM什么是双向LSTM例子为什么用双向LSTM?单向的RNN,是根据前面的信息推出后面的,但有时候只看前面的词是不够的,例如,我今天不舒服,我打算__一天。只根据‘不舒服‘,可能推出我打算‘去医院‘,‘睡觉‘,‘请假‘等等,但如果加上后面的‘一天‘,能选择的范围就变小了,‘去医院‘这种就不能选了,而‘请假‘‘休息‘之类的被选择概率就会更大。什么是双向L

    2022年6月15日
    76

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号