CSS滚动条实现步骤和美化小技巧.pdfVIP

CSS滚动条实现步骤及美化⼩技巧 很多朋友在⽹页设计中要⾃定义滚动条样式的情景，滚动条的样式我们可以通过css来 控 的，⽐如⽹易邮箱的滚动条样⼦很好看，就是利⽤的CSS来设置实现的。但是css 控 的滚动条应该如何实现和隐藏呢？滚动条能不能换颜⾊或者做的更好看⼀些呢？ 下⾯通通告诉你。 1、overflow-y : 设置当对象的内容超过其指定⾼度时如何管理内容；overflow-x : 设置 当对象的内容超过其指定宽度时如何管理内容。 参数: visible ：扩⼤⾯积以显⽰所有内容 auto ：仅当内容超出限定值时添加滚动条 hidden ：总是隐藏滚动条 scroll ：总是显⽰滚动条 2、height : 设置滚动条的⾼度 （修改其后数值即可）。 3、滚动条颜⾊参数设置： scrollbar-3d-light-color 设置或检索滚动条亮边框颜⾊ scrollbar-highlight-color 设置或检索滚动条3D界⾯的亮边 （ThreedHighlight ）颜⾊ scrollbar-face-color 设置或检索滚动条3D表⾯ （Threed ace ）的颜⾊ scrollbar-arrow-color 设置或检索滚动条⽅向箭头的颜⾊ scrollbar-shadow-color 设置或检索滚动条3D界⾯的暗边 （ThreedShadow ）颜⾊ scrollbar-dark-shadow-color 设置或检索滚动条暗边框 （ThreedDarkShadow ）颜⾊ scrollbar-base-color 设置或检索滚动条基准颜⾊ 设置滚动条样式 在原来的html的时候，我们可以这样定义整个页⾯的滚动条 body{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左⼆ -*/ scrollbar-face-color:#E4E4E4; /*- ⾯⼦ -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右⼆ -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右⼀ -*/ scrollbar-base-color:#D7DCE0; /*- 基⾊ -*/ scrollbar-track-color:# ;/*- 滑道 -*/ } 但是同样的代码，我们应⽤在 xhtml下就不起作⽤了，我相信好多好朋友也遇到过同 样的问题 那么怎么才能在xhtml下应⽤滚动条样式呢？看下列代码 html{ scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/ scrollbar-highlight-color:#fff; /*- 左⼆ -*/ scrollbar-face-color:#E4E4E4; /*- ⾯⼦ -*/ scrollbar-arrow-color:#666; /*- 箭头 -*/ scrollbar-shadow-color:#808080; /*- 右⼆ -*/ scrollbar-darkshadow-color:#D7DCE0; /*- 右⼀ -*/ scrollbar-base-color:#D7DCE0; /*- 基⾊ -*/ scrollbar-track-color:# ;/*- 滑道 -*/ } 这段代码和上⼀段唯⼀的不同就是在css定义的元素上，⼀个是body⼀个是html 。我们 再测试⼀下，把html页⾯的body修改成html测试⼀下，发现依然可以实现效果。那 到底是为什么呢？ 从字⾯上来看，xhtml⽐html多⼀个x ,那么这个x其实也就是xml ,为什么要加⼀个xml在 ⾥⾯？其实最根本的原因就是要让html更加结构化标准化 （因为html实在是太烂）。 我们在html⾥⾯定义的是body ，因为html不是很标准所以这样可以⽣效，⽽在xhtml⾥ ⾯这样就不⾏了，我看看那个图很明显，body标签本⾝不是根元素，只有html才是根 元素，⽽页⾯的滚动条也是属于根元素的，所以这就是我们为什么定义body没有效果 的原因，因为我们定义的只是⼀个⼦原素。ok ，我们知道了原理，来做⼀个试验如果 把定义body或xhtml换成* ， *{