DIV滚动条显示

DIV滚动条显示DIV滚动条所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当div所规范的区域内的内容达到一定程序时,滚动条就派上用场1、滚动条常用属性:overflow:auto为自动,scroll为出现滚动条overflow-x:横向滚动条overflow-y:纵向滚动条代码样例:  这里是你要显示的内容,只有需要时才出现滚动条。  这里是你要显示的内容,无论是否需要都出现滚动条。

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

DIV滚动条

 

 

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

1、滚动条常用属性:
overflow:auto为自动,scroll为出现滚动条
overflow-x:横向滚动条
overflow-y:纵向滚动条

代码样例:

  
  
  
< div style ="width:260px;height:120px; overflow:auto; border:1px solid;" >
  这里是你要显示的内容,只有需要时才出现滚动条。
</ div >
< div style ="width:260px;height:120px; overflow:scroll; border:1px solid;" >
  这里是你要显示的内容,无论是否需要都出现滚动条。
</ div >
< div style ="width:260px;height:120px; overflow-y:scroll; border:1px solid;" >
  这里是你要显示的内容,只出现Y-纵向滚动条。
</ div >
< div style ="width:260px;height:120px; overflow-x:scroll; border:1px solid;" >
  这里是你要显示的内容,只出现X-横向滚动条。
</ div >

 
2、滚动条相关颜色属性:
scrollbar-face-color:滚动条滑块部分的颜色
scrollbar-highlight-color:滚动条空白部分的颜色
scrollbar-shadow-color:滚动条阴影的颜色
scrollbar-arrow-color:上下按钮三角箭头的颜色
scrollbar-base-color:滚动条的基本颜色
scrollbar-darkshadow-color:滚动条强阴影的颜色
scrollbar-track-color:滚动条滑道颜色

代码样例:

  
  
  
span style="color: #0000ff;">< div style ="overflow:scroll;width:260px;height:120px;
  scrollbar-face-color:#ffffff;
  scrollbar-highlight-color:#ffffff;
  scrollbar-shadow-color:#919192;
  scrollbar-arrow-color:#919192;
  scrollbar-base-color:#900000;
  scrollbar-darkshadow-color:#ffffff;
  scrollbar-track-color:#ffffff;"
>
  这里是你要显示的内容。设置滚动条颜色。
</ div >
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

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


相关推荐

  • idea 最新激活码(注册激活)「建议收藏」

    (idea 最新激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~KU…

    2022年3月22日
    82
  • Java实现七牛云文件或图片上传下载

    Java实现七牛云文件或图片上传下载文章目录一、准备工作1.1.为什么选择七牛云?1.2.七牛云注册二、java操作七牛云对象存储下载2.1.pom.xml引入依赖2.2.上传下载具体代码三、具体业务例子(七牛云做图片服务器–SpringBoot)3.1.pom.xml(此处继承上面的依赖多引入一个)3.2.创建一个html页面3.3.接下来就是FileUtil.java(判断图片的后缀是否符合要求)3.4.接下来写QiniuService.java3.5.最后是controller3.6.查看七牛云存储结果四、总结一、准备工作1

    2022年5月14日
    34
  • 查看linux系统版本centos,CentOS下查看系统版本的4种方法

    查看linux系统版本centos,CentOS下查看系统版本的4种方法Linux有很多的发行版,不同的版本会有一些细微区别,所以经常需要查看服务器系统的版本号。下面来看下CentOS下如何查看CentOS版本。方法1:cat/etc/issue执行命令:[www@pythontab.com]$cat/etc/issueCentOSrelease6.8(Final)Kernelonanm我当前系统版本就是:CentOS6.8知识扩展:etc目录…

    2022年6月24日
    29
  • JS经常使用字符串处理方法总结

    JS经常使用字符串处理方法总结

    2022年2月6日
    238
  • MFC Java 使用socket 中文乱码解决方法(一)「建议收藏」

    MFC Java 使用socket 中文乱码解决方法(一)「建议收藏」MFCJava使用socket中文乱码解决方法(一)1、在使用MFC做服务端,Java做客户端时(1)客户端向服务端发送数据 Java发送代码:PrintWriterprintWriter= newPrintWriter( newBufferedWriter( newOutputStreamWriter( client.getOutputStream(),”gbk”)),true); //Windows一般默认为GB

    2022年7月14日
    12
  • java前端和后端的区别[通俗易懂]

    java前端和后端的区别[通俗易懂]java”前端”是与用户直接交互的部分,包括你在浏览网页时接触的所有视觉内容–从字体到颜色,以及下拉菜单和侧边栏。这些视觉内容,都是由浏览器解析、处理、渲染相关HTML、CSS、Javascript文件后呈现而来。java后端开发者使用这些工具编写干净、可移植、具有良好文档支持的代码来创建或更新Web应用。但在写代码之前,他们需要与客户沟通,了解其实际需求并转化为技术目标,制定最有效且精简的方案来进行实现。 java”前端”开发,就是要创造上面提到的网站面向用户的部分背后的代码,并.

    2022年7月9日
    19

发表回复

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

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