欢迎来到天天文库
浏览记录
ID:11416244
大小:27.00 KB
页数:5页
时间:2018-07-11
《css中滚动条样式的设置》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库。
1、css中滚动条样式的设置参数说明:1、overflow-y:设置当对象的内容超过其指定高度时如何管理内容;overflow-x:设置当对象的内容超过其指定宽度时如何管理内容。参数:visible:扩大面积以显示所有内容auto:仅当内容超出限定值时添加滚动条hidden:总是隐藏滚动条scroll:总是显示滚动条2、height:设置滚动条的高度(修改其后数值即可)。3、滚动条颜色参数设置:scrollbar-3d-light-color设置或检索滚动条亮边框颜色scrollbar-highlig
2、ht-color设置或检索滚动条3D界面的亮边(ThreedHighlight)颜色scrollbar-face-color设置或检索滚动条3D表面(ThreedFace)的颜色scrollbar-arrow-color设置或检索滚动条方向箭头的颜色scrollbar-shadow-color设置或检索滚动条3D界面的暗边(ThreedShadow)颜色scrollbar-dark-shadow-color设置或检索滚动条暗边框(ThreedDarkShadow)颜色scrollbar-base-
3、color设置或检索滚动条基准颜色xhtml中隐藏滚动条在用ie6浏览有框架的xhtml页面的时候,默认会水平和垂直滚动条会一起出现,这是ie6的一个bug,在firefox上是正常的,出现的原因是其对XHTML1.0transitionaldoctype的解释缺陷.对于这个bug一般有3种解决方案,方法1:代码:html{overflow-y:scroll;}原理:强制显示ie的垂直滚动条,而忽略水平滚动条优点:完全解决了这个问题,允许你保持完整的XHTMLdoctype.缺点:即使页面不需要垂
4、直滚动条的时候也会出现垂直滚动条。方法2:代码:html{overflow-x:hidden;overflow-y:auto;}原理:隐藏横向滚动,垂直滚动根据内容自适应优点:在视觉上解决了这个问题.在不必要的时候,未强制垂直滚动条出现.缺点:只是隐藏了水平滚动条,如果页面真正需要水平滚动条的时候,屏幕以外的内容会因为用户无法水平滚动,而看不到。方法3:代码:body{margin-right:-15px;margin-bottom:-15px;}原理:这会在margin的水平和垂直方向上添加一个
5、负值,IE添加了该精确数值后,便会去除对滚动条的需求假象.优点:在视觉上解决了这个问题.,垂直滚动根据内容自适应缺点:由于"人为创建"了15px的外边距(margin),所以无法使用该填充过的屏幕区域.设置滚动条样式在原来的html的时候,我们可以这样定义整个页面的滚动条body{scrollbar-3dlight-color:#D4D0C8;/*-最外左-*/ scrollbar-highlight-color:#fff;/*-左二-*/ scrollbar-face-color:#E4E4
6、E4;/*-面子-*/ scrollbar-arrow-color:#666;/*-箭头-*/ scrollbar-shadow-color:#808080;/*-右二-*/ scrollbar-darkshadow-color:#D7DCE0;/*-右一-*/ scrollbar-base-color:#D7DCE0;/*-基色-*/ scrollbar-track-color:#;/*-滑道-*/}但是同样的代码,我们应用在xhtml下就不起作用了,我相信好多好朋友也遇到过同样的问题
7、那么怎么才能在xhtml下应用滚动条样式呢?看下列代码html{scrollbar-3dlight-color:#D4D0C8;/*-最外左-*/ scrollbar-highlight-color:#fff;/*-左二-*/ scrollbar-face-color:#E4E4E4;/*-面子-*/ scrollbar-arrow-color:#666;/*-箭头-*/ scrollbar-shadow-color:#808080;/*-右二-*/ scrollbar-darkshad
8、ow-color:#D7DCE0;/*-右一-*/ scrollbar-base-color:#D7DCE0;/*-基色-*/ scrollbar-track-color:#;/*-滑道-*/}这段代码和上一段唯一的不同就是在css定义的元素上,一个是body一个是html。我们再测试一下,把html页面的"body"修改成"html"测试一下,发现依然可以实现效果。那到底是为什么呢?从字面上来看,xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在
此文档下载收益归作者所有