iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >DIV滚动条属性及样式设置方式有哪些
  • 252
分享到

DIV滚动条属性及样式设置方式有哪些

2024-04-02 19:04:59 252人浏览 泡泡鱼
摘要

本篇内容介绍了“DIV滚动条属性及样式设置方式有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!DIV滚

本篇内容介绍了“DIV滚动条属性及样式设置方式有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

DIV滚动条属性及样式设置

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

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

示例代码:

<styletylestyletyle="text/css"> .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;   }   </style>

注:

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根据内容自动判断是否添加滚动条

“DIV滚动条属性及样式设置方式有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: DIV滚动条属性及样式设置方式有哪些

本文链接: https://www.lsjlt.com/news/86855.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • DIV滚动条属性及样式设置方式有哪些
    本篇内容介绍了“DIV滚动条属性及样式设置方式有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!DIV滚...
    99+
    2022-10-19
  • html中div滚动条设置,DIV滚动条属性及样式设置方式
    在HTML中,可以通过CSS来设置div的滚动条属性和样式。以下是一些常见的设置方式:1. 设置div的滚动条样式:```cssdi...
    99+
    2023-09-20
    html
  • CSS中div滚动条样式如何设置
    这篇文章主要介绍“CSS中div滚动条样式如何设置”,在日常操作中,相信很多人在CSS中div滚动条样式如何设置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中div滚...
    99+
    2022-10-19
  • html滚动条样式的设置方法
    这篇文章主要介绍了html滚动条样式的设置方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。设置html滚动条样式的方法:首先新建文档,再新建CSS文件;然后创建DIV标签并...
    99+
    2023-06-14
  • css设置滚动条可能需要的属性有哪些
    这篇文章给大家分享的是有关css设置滚动条可能需要的属性有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。     首先我们来看一下css设置滚动条可能需...
    99+
    2022-10-19
  • html中div间距CSS样式布局设置的方法有哪些
    这篇文章主要介绍“html中div间距CSS样式布局设置的方法有哪些”,在日常操作中,相信很多人在html中div间距CSS样式布局设置的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • CSS样式属性单词代码简写方式有哪些
    这篇文章将为大家详细讲解有关CSS样式属性单词代码简写方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 1、border(CSS边框)简写: 1)、4个边边框...
    99+
    2022-10-19
  • Flex程序设计中正则表达式的属性和方法有哪些
    这篇文章主要介绍Flex程序设计中正则表达式的属性和方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Flex程序设计--正则表达式RegExp类允许使用正则表达式(即可用于在字符串中执行搜索和替换文本的模式)...
    99+
    2023-06-17
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作