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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 学习入侵躲避技术—理解AET

    学习入侵躲避技术—理解AET

    2022年3月11日
  • 新手小白学JAVA 面向对象之多态

    新手小白学JAVA 面向对象之多态4多态4.1概念多态指同一个实体同时具有多种形式它是面向对象程序设计(OOP)的一个重要特征。主要是指同一个对象,在不同时刻,代表的对象不一样,指的是对象的多种形态。好处是:可以把不同的子类对象都当作父类来看,可以屏蔽不同子类对象之间的差异,写出通用的代码,做出通用的编程,统一调用标准。水果有两种形态:水果和苹果,不关心买回来的是苹果还是西瓜,只要是水果就行classAnimal{//1.定义父类Animal…eat(){syso(“吃啥都行”)}}classCatexte

    2022年7月19日
  • echarts的grid属性详解

    echarts的grid属性详解grid配置项:图标离容器的距离show:是否显示直角坐标系网格———–值:true?falseleft:图表离容器左侧的距离—————–值:number?百分比top:图表离容器顶部的距离—————–值:number?百分比right:图表离容器右侧的距离—————值:number?百分比bottom:图表离容器底部的距离————值:number?百分比backgroundColor:网格背景色—

    2022年7月15日
  • 常用网络通信协议结构图「建议收藏」

    常用网络通信协议结构图「建议收藏」话不多说直接上图妈妈再也不用担心我搞不清楚网络协议关系了一图降十会

    2022年9月16日
  • c语言生成随机数数组

    c语言实现获得从0~num-1的随机数组(数组元素不重复,内容是0~num-1),实现的原理是数组乱序,效率高!

    2022年4月7日
  • 单片机流水单C语言程序,51单片机流水灯C语言源程序

    单片机流水单C语言程序,51单片机流水灯C语言源程序**************************************************************文件名称:flash_led.c文件说明:流水灯C程序编写日期:2006年10月5日程序说明:MCU采用AT89S51,外接12M晶振,P1口输出*************************************************************/#in…

    2022年5月5日

发表回复

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

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