div+css教程_CSS如何自定义滚动条样式

div+css视频教程共三课,57集。由“教程网” 精心打造,每个知识点都对应着实例进行贯通巩固，并提供了对应实例的源码示例下载，及作业的讲解视频，老师答疑等;
   视频教程内容主要包括：web,Css语法基础及代码瘦身,div+css布局实例讲解,xml+css布局的讲解等。

课程总目标 课程目标 Web标准概论

Web标准中标记应用思路 检测网站符合web标准 学习div+css的相关学习工具

xhtml语法及与html区别 div标签 Dreamweaver中css的使用

新建CSS规则面板的介绍 css类型面板介绍 css背景面板介绍

css区块面板介绍 css方框面板介绍 css边框面板介绍

css列表面板介绍 Div+css布局流程 Div+css布局实例操作-切片

布局实例操作-定义布局层 布局实例操作-逐步定义每个层(body) 布局实例操作-逐步定义每个层(top)

布局实例操作-逐步定义每个层(contents) 布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(foot)

布局实例操作-逐步定义每个层(left) 布局实例操作-逐步定义每个层(main) 布局实例操作-逐步定义每个层(right)

定义全文文字样式 定义指定层里文字样式(使文字垂直居中) 定义标题样式(h1,h2,h3,h4)等

定义全页链接样式 定义指定层里链接样式 定义ul的项目符号

导航栏设置1 导航栏设置2

css实现滚动条样式有时候非常有用，客户既然提出来了我们就应该满足。这里我们就来总结一下。当然，兼容所有浏览器的滚动条样式目前是不存在的。

IE下的滚动条样式

IE是最早提供滚动条的样式支持，嗯，好多年了，但是其它浏览器一直没有支持，IE独孤求败了。

这些样式规则很简单：

大概就这些，你也可以定义cursor来定义滚动条的鼠标手势。

这里，很久以前danger做了个基于Flash的可视化工具，简单但是好用：

选中CSS选项即可自动生成CSS样式，这里不再过多的介绍了。嗯，多谢大猫老师推荐。

webkit的自定义滚动条样式

yes，这里才是今天要重点介绍的。

从上一部分的样式名中就可以看到，IE只能定义相关部分的color等属性，这样太不灵活了。

webkit最近实现了对滚动条的支持，先看一个简单的demo：

不过，webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素：

通过这些伪元素，可以完全的重写一个网站的滚动条样式。

当然webkit提供的不止这些，还有很多伪类，可以更丰富滚动条样式：

另外，:enabled、:disabled、:hover 和 :active 等伪类同样可以用于滚动条中。

关于具体的demo，这里不再做了，网上已经有很多demo可以参考，比如，QQ空间的签到弹出框和豆瓣说的右侧详情栏(某条信息评论多的时候会显示)。

值得一提的是，webkit的这个伪类和伪元素的实现很强大，虽然类目有些多，但是我们可以把滚动条当成一个页面元素来定义，也差不多可以用上一些高级的CSS3属性，比如渐变、圆角、RGBa等等，当然有些地方也可以用图片，然后图片也可以转换成Base64，总之，可以尽情发挥了。