旧貌要换新颜:滚动条大变身
时间:2007-02-17 来源:PHP爱好者
滚动条的颜色、阴影、立体等等都是由CSS所定义的,可能各位常常听说CSS的大名,又不太了解它到底是何方神圣吧,那偶在这里就简单说说好了。CSS就是样式表,它主要被用来控制网页的字体大小、字体颜色、背景色、滚动条样式等等。
可能有同学会在这时候插嘴了:“字体颜色大小,我直接在FRONTPAGE中也一样可以控制啊。”
OK,请坐,这位的话讲得非常好。确实,颜色方面呢倒不是很紧要,但是字体的大小控制可就非常要紧了,这是网站成败的一大关键哦!举例来说吧,可能大家常常会看到一些“怪怪”的网页:本来排版还挺好的,可是字一个个都很大,感觉好象把网页都“撑”破了似的。这种症状就是典型的“CSS未定义或定义不当症”。因为每个电脑用户的IE浏览器的设置都可能不一样,如果没有CSS控制的话,就会发生在自己机器上看着这网页明明是好好的,但是上传到网上后,别人看起来却是乱七八糟的情况。
呵呵,抱歉,偶又跑题了,不过在讲了这么一堆以后,大家一定对CSS有很大认识咯!现在来讲讲滚动条的定义。
打开需要控制滚动条的网页,我们转到代码页面,直接拷贝以下代码加入<head></head>之间:
<style>
<!--
BODY{
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-shadow-color:'#ffffff';
scrollbar-highlight-color:'#ffffff';
scrollbar-base-color:'#ffffff';
scrollbar-darkshadow-Color:'#ffffff';
}
-->
</style>
现在给出各字段的含义哦,那些“#ffffff”之类的就是颜色代码啦,各位可以随便修改哦。
scrollbar-face-color 立体滚动条凸出部分的颜色
scrollbar-arrow-color 上下按钮上三角箭头的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-base-color 滚动条基本颜色
scrollbar-darkshadow-Color 立体滚动条强阴影的颜色
就这么轻松哦,填上自己喜欢的颜色代码以后,可以预览看看合适不合适,注意一定要与网页本身的主色调搭配,别喧宾夺主咯。最重要的永远是心思,不是技巧哦。
感谢各位这么赏脸来看偶的教程,最后偶再奉送一道小点心给大家品尝,谢谢谢谢。
在任何情况下,如果网页超出显示器所设定分辨率的显示范围,就会出现滚动条。但有时偶们可能会觉得它有碍观瞻,不想让它显示,如何隐藏它呢?请在<body> </body>之间插入代码:<body style="overflow-x:hidden;overflow-y:hidden">,搞定。其中x表示水平滚动条,将其改为y的话就可以隐藏垂直滚动条。
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.
可能有同学会在这时候插嘴了:“字体颜色大小,我直接在FRONTPAGE中也一样可以控制啊。”
OK,请坐,这位的话讲得非常好。确实,颜色方面呢倒不是很紧要,但是字体的大小控制可就非常要紧了,这是网站成败的一大关键哦!举例来说吧,可能大家常常会看到一些“怪怪”的网页:本来排版还挺好的,可是字一个个都很大,感觉好象把网页都“撑”破了似的。这种症状就是典型的“CSS未定义或定义不当症”。因为每个电脑用户的IE浏览器的设置都可能不一样,如果没有CSS控制的话,就会发生在自己机器上看着这网页明明是好好的,但是上传到网上后,别人看起来却是乱七八糟的情况。
呵呵,抱歉,偶又跑题了,不过在讲了这么一堆以后,大家一定对CSS有很大认识咯!现在来讲讲滚动条的定义。
打开需要控制滚动条的网页,我们转到代码页面,直接拷贝以下代码加入<head></head>之间:
<style>
<!--
BODY{
scrollbar-face-color:#ffffff;
scrollbar-arrow-color:#cccccc;
scrollbar-shadow-color:'#ffffff';
scrollbar-highlight-color:'#ffffff';
scrollbar-base-color:'#ffffff';
scrollbar-darkshadow-Color:'#ffffff';
}
-->
</style>
现在给出各字段的含义哦,那些“#ffffff”之类的就是颜色代码啦,各位可以随便修改哦。
scrollbar-face-color 立体滚动条凸出部分的颜色
scrollbar-arrow-color 上下按钮上三角箭头的颜色
scrollbar-shadow-color 立体滚动条阴影的颜色
scrollbar-highlight-color 滚动条空白部分的颜色
scrollbar-base-color 滚动条基本颜色
scrollbar-darkshadow-Color 立体滚动条强阴影的颜色
就这么轻松哦,填上自己喜欢的颜色代码以后,可以预览看看合适不合适,注意一定要与网页本身的主色调搭配,别喧宾夺主咯。最重要的永远是心思,不是技巧哦。
感谢各位这么赏脸来看偶的教程,最后偶再奉送一道小点心给大家品尝,谢谢谢谢。
在任何情况下,如果网页超出显示器所设定分辨率的显示范围,就会出现滚动条。但有时偶们可能会觉得它有碍观瞻,不想让它显示,如何隐藏它呢?请在<body> </body>之间插入代码:<body style="overflow-x:hidden;overflow-y:hidden">,搞定。其中x表示水平滚动条,将其改为y的话就可以隐藏垂直滚动条。
php爱好者站 http://www.phpfans.net PHP|MySQL|javascript|ajax|html.
相关阅读 更多 +