`
zpball
  • 浏览: 903598 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • CSS
css 
阅读更多
这里向大家描述一下DIV滚动条属性及样式设置,所谓DIV滚动条,就是利用DIV标签,在里面嵌入CSS样式表,加入overflow的属性值,这样,当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 css 滚动条样式 DIV滚动条属性及样式设置方式

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

    dreamweaver滚动条

    * scrollBar-3dLight-color:设置滚动条的 3D 光线颜色 * scrollBar-darkshadow-color:设置滚动条的暗影颜色 * scrollBar-shadow-color:设置滚动条的阴影颜色 * scrollBar-arrow-color:设置滚动条的箭头颜色 ...

    div的position属性

    它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-...

    给DIV添加滚动条的实现代码

    要为 DIV 添加滚动条,只需要在 DIV 元素中添加 `overflow` 属性,并将其值设置为 `auto`。例如: ``` &lt;div style="position:absolute; height:400px; overflow:auto"&gt;&lt;/div&gt; ``` 这样,当 DIV 元素中的内容超过其...

    网页设计师DIV+CSS面试宝典

    IE 浏览器滚动条颜色、定义 1px 高度的容器、让层显示在 FLASH 之上、使一个 div 层居中于浏览器中、Firefox 浏览器中嵌套 div 标签的居中问题等八个问题。 一、超链接点击后 hover 样式消失 解决方法:改变 CSS ...

    FireFox火狐浏览器与IE兼容问题 - 透明滤镜 DIV滚动条

    IE浏览器可以使用SCROLLBAR-ARROW-COLOR、SCROLLBAR-TRACK-COLOR等属性来设置DIV滚动条的颜色,而FireFox火狐浏览器暂时还没有找到相应的解决方法。 五、border-width问题 IE浏览器可以使用border-width: 0px 0px ...

    零基础学HTML CSS源代码

    设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章(源代码\第10章) 示例描述:本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....

    ScrollDiv:演示没有滚动条的滚动功能

    滚动分区演示没有滚动条的滚动功能如果我们需要在不使用滚动条的情况下水平滚动 div 容器,那么这就是合适的。 该脚本将检测 div 内容溢出,并将自动在主 div 容器的任一侧添加左滚动和右滚动按钮。 用户可以单击...

    JavaScript内部测试-笔试试题和答案.doc

    overflow 属性可以设置标签的溢出样式,overflow:scroll 可以使标签出现滚动条。 8. 阅读下面 HTML 代码,在 IE7.0 及以上版本浏览器中,两个 DIV 之间的空白距离是(C.15px)。在 IE7.0 及以上版本浏览器中,...

    HTML-CSS-DIV网页设计与布局第章-网页布局与设计技巧.pptx

    使用CSS布局可以使网页变得更简洁、方便和美观,但也需要掌握一些CSS样式和属性,如width、height、background-color、border等。 一栏布局 一栏布局是指将网页中所有内容都以一栏方式显示的一种布局方式。在这种...

    Web前端开发试题.docx

    2. CSS 属性 overflow 用于设置元素超过宽度时是否隐藏或显示滚动条。(对) 解释:CSS 的 overflow 属性用于设置元素超过宽度时的行为,可以隐藏或显示滚动条。 3. 在不涉与样式情况下,页面元素的优先显示与结构...

    html+css考试题.docx

    在 HTML 中,框架的属性面板可以设置很多属性,例如源文件、边框颜色、边框宽度等,但是滚动条不是框架的属性之一。 2. 下列哪一项表示的不是按钮( C )A. type="submit"B.type="reset"C.type="image"D.type=...

    c# repeater 锁表头

    此方法的思路其实很简单,就是将表头放在一个表格中,将表单内容repeater放在一个DIV中 ,再将DIV的样式高度设为定值,并将此div设置为允许出现纵向滚动条。这种方法可以解决锁表头的功能,但是这里的缺点就是要将...

    jquery浏览器滚动加载技术实现方案

    要知道,数据量增加很频繁时,要通过定位页码来找到目标数据似乎并没有...假设DOM上有一个元素为&lt;div id=”mypage”&gt;&lt;/div&gt;,该元素overflow样式为scroll,也就是元素中的内容溢出元素指定高度时启用滚动条。利用jqu

    Div+Css实现屏蔽效果

    2、CSS样式表:这种方法,只能提前设置好遮罩层的长与宽了,但是就会出现一些问题:如果你的遮罩层设置的宽度、长度很大,那么在小显示器上就会出现浏览器的滚动条~~反之则会出现遮罩不上的问题

    html列表标签

    滚动条是通过div标签实现的,需要添加style属性,设置overflow-x属性为auto,并且可以设置高度和宽度。 超链接 超链接是通过a标签实现的,href属性指定链接的地址。当href属性的值中没有指定协议时,默认使用...

    始终在屏幕中间显示Div的代码(css+js)

    我们可以使用document.documentElement.scrollTop和document.documentElement.clientHeight来获取当前滚动条的位置和屏幕的高度,然后计算Div元素的top和left属性。例如: function sc1(DivId) { var Div = $...

    jquery-do-scroll:使用touchmouse事件创建一个Y滚动动作

    jquery-do-scroll 创建类似滚动Y的动作。... 滚动条设置自己的滚动条的样式: var ctrl = { // ... scrollbar : $ ( '&lt;div&gt;' ) . css ( { backgroundColor : '#fff' , height : '75px' , width : '10px' ,

    html+css技能测试带答案).doc

    8. CSS 属性 overflow 用于设置元素超过宽度时是否隐藏或显示滚动条。 知识点:CSS 溢出处理,overflow 属性的使用场景和作用。 9. CSS 属性 font-style 用于设置字体的粗细。 知识点:CSS 字体样式,font-style ...

Global site tag (gtag.js) - Google Analytics