实例解析DIV Scroll属性用法
创始人
2024-07-13 08:01:18
0

本文和大家重点讨论一下DIV Scroll属性的用法,在CSS中DIV Scroll属性还是比较实用的,这里和大家分享一下它的使用,希望对你的学习有所帮助。

DIV Scroll属性

DIV Scroll属性详解,为DIV层打造不同的滚动条。

一、scrollbar属性、样式详解

1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条)

overflow-x水平方向内容溢出时的设置

overflow-y垂直方向内容溢出时的设置

以上属性设置的值为visible(默认值)、scroll(出现滚动条)、hidden(隐藏)、auto()浏览器自动设置)。

2.scrollbar-3d-light-color立体滚动条亮边的颜色(设置滚动条的颜色)

scrollbar-arrow-color上下按钮上三角箭头的颜色

scrollbar-base-color滚动条的基本颜色

scrollbar-dark-shadow-color立体滚动条强阴影的颜色

scrollbar-face-color立体滚动条凸出部分的颜色

scrollbar-highlight-color滚动条空白部分的颜色

scrollbar-shadow-color立体滚动条阴影的颜色#p#

二、我们通过几个实例来讲解上述的样式属性:

1.设定多行文本框的滚动条

没有水平滚动条 

  1.  
  2.  

没有垂直滚动条 

  1.  
  2.  

没有滚动条 

  1. overflow-y:hidden"> 
  2.  
  3.  
  4.  

2.让浏览器窗口永远都不出现滚动条

没有水平滚动条 

  1.  
  2.  

没有垂直滚动条 

  1.  
  2.  

没有滚动条 

  1.  
  2.  

#p#3.在样式表文件中定义好一个类,调用样式表。 

  1.  
  2.  

这样调用:

  1.  
  2.  

Scrollbar-Face-Color为滚动条表面颜色设定;

Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定;

Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定;

Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定;

Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。

Scrollbar-Track-Color为滚动条底板颜色设定;

Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定。

实例: 

  1. body{  
  2. background-color:#ffffff;  
  3. color:#336699;  
  4. SCROLLBAR-FACE-COLOR:#BED8EB;  
  5. SCROLLBAR-SHADOW-COLOR:#DDF8FF;  
  6. SCROLLBAR-HIGHLIGHT-COLOR:#92C0D1;  
  7. SCROLLBAR-3DLIGHT-COLOR:#DDF8FF;  
  8. SCROLLBAR-DARKSHADOW-COLOR:#92C0D1;  
  9. SCROLLBAR-TRACK-COLOR:#BED8EB;  
  10. SCROLLBAR-ARROW-COLOR:#92C0D1  
  11. }  
  12.  

4.设定窗口滚动条的颜色

设置窗口滚动条的颜色为红色
scrollbar-base-color设定的是基本色,一般情况下只需要设置这一个属性就可以达到改变滚动条颜色的目的。

加上一点特别的效果: 

  1. scrollbar-base-color:lightsalmon"> 
  2.  

【编辑推荐】

  1. 实现CSS中div列高度自适的3种途径
  2. JavaScript动态创建div属性和样式
  3. SPAN元素和DIV元素的区别
  4. CSS float方法实现DIV CSS网页布局三栏页
  5. 探究CSS中border:none;与border:0;的区别

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
规避非法攻击 用好路由器远程管... 单位在市区不同位置设立了科技服务点,每一个服务点的员工都通过宽带路由器进行共享上网,和单位网络保持联...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
范例解读VB.NET获取环境变... VB.NET编程语言的使用范围非常广泛,可以帮助开发人员处理各种程序中的需求,而且还能对移动设备进行...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...