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)
上一篇 2022年7月12日 下午1:16
下一篇 2022年7月12日 下午1:36


相关推荐

  • rammap使用_查看内存的命令

    rammap使用_查看内存的命令参考TechnetProcessPrivate:分配给单一Process专用的内存MappedFile:用来储放档案内容快取(Cache)的内存空间SharedMemory:标注给多个Process共用的内存分页(Page,内存管理单位)PageTable:用来描述虚拟内存位址的分页表(裡面是一笔一笔的PTE,PageTableEntries)PagedPool…

    2025年8月10日
    6
  • IIS、nginx、apache只允许域名访问配置

    IIS、nginx、apache只允许域名访问配置

    2021年10月8日
    38
  • C语言二分法查找

    C语言二分法查找二分查找也叫折半查找典型算法 算法 当数据量很大适宜采用该方法 采用二分法查找时 数据需是排好序的 基本思想 假设数据是按升序排序的 对于给定值 n 从序列的中间位置 mid 开始比较 如果当前位置 arr mid 值等于 n 则查找成功 若 n 小于当前位置值 arr mid 则在数列的前半段中查找 arr left mid 1 若 n 大于当前位置值 arr mid 则在数列的后半段中继续查找 arr left 1 right 直到找到为止 时间复杂度 O log n 解题思路 给定一个数组 ar

    2026年3月18日
    2
  • kafka集群及与springboot集成

    kafka集群及与springboot集成linux搭建,kafkao3节点虚拟机为CentOS6,ip为192.168.1.128,192.168.1.129和192.168.1.130,域名分别为master,worker1,worker21.集群#192.168.1.128[root@masterlocal]#cd/home/gilbert/app/rar/[root@masterrar]#tarzxv…

    2022年4月25日
    45
  • strlen函数用法举例(strlen字符串)

    strlen(char*)函数求的是字符串的实际长度,它求得方法是从开始到遇到第一个’\0’,如果你只定义没有给它赋初值,这个结果是不定的,它会从aa首地址一直找下去,直到遇到’\0’停止。charaa[10];cout<charaa[10]={‘\0’};cout<charaa[10]=”jun”;cout<而sizeof()返回的是变量声明后所占的内存数,不是实际长…

    2022年4月13日
    62
  • 【pycharm】python代码块整体缩进,整体取消缩进

    【pycharm】python代码块整体缩进,整体取消缩进pycharm编辑器的缩进和取消缩进快捷键:整体缩进:tab整体取消缩进:shift+tabpython自带编辑器的缩进和取消缩进快捷键:整体缩进Ctrl+【整体取消缩进Ctrl+】…

    2022年8月28日
    4

发表回复

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

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