网页滚动条样式overflow的学习
今天为了制作我的相册，来学习了一下滚动条样式的问题。
一、首先来了解一下overflow
overflow：内容溢出时的设置，可以设置对象是否显示滚动条，
overflow-x：指水平方向内容溢出时的设置
overflow-y：指垂直方向内容溢出时的设置
它们设置的值为visible、scroll、hidden、auto。
visible是默认值。使用这个值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都会被强制显示出来。
hidden效果与visible相反。任何超出"width"和"height"的内容都会不可见。
scroll无论内容是否超出范围，都会显示滚动条。
auto当内容超出范围时，自动显示滚动条，否则不显示。
例如：
1.浏览器窗口不出现滚动条：
a.没有水平滚动条：<body style="overflow-x:hidden">
b.没有垂直滚动条：<body style="overflow-y:hidden">
c.没有滚动条：<body style="overflow-x:hidden;overflow-y:hidden">
或<body style="overflow:hidden">
2.让多行的文本隐藏滚动条：
a.没有水平滚动条：<textarea style="overflow-x:hidden"></textarea>
b.没有垂直滚动条：<textarea style="overflow-y:hidden"></textarea>
c.没有滚动条：<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<body style="overflow:hidden"></textarea>
二、设定滚动条的颜色
在浏览网页的时候我们有时可以看到有许多网页滚动条颜色不是系统默认的，而是漂亮的粉红色或其它颜色，其实只要在网页代码中加入一些代码就可以实现。
DIY属于你自己的滚动条，将这些代码加入到<head></head>中间。/*这里是代码的注释*/
<style type="text/css">
<!--
Body {
scrollbar-face-color:#FFFFFF;/*立体滚动条表面的颜色*/
scrollbar-highlight-color:#FFFFFF;/*滚动条空白部分的颜色*/
scrollbar-shadow-color:#808080;/*立体滚动条阴影的颜色*/
scrollbar-arrow-color:#000000; /*上下按钮上三角箭头的颜色*/
scrollbar-track-color:#E0E0E0;/*立体滚动条滚动区的颜色*/
scrollbar-3dlight-color:#C0C0C0;/*立体滚动条亮边的颜色*/
scrollbar-darkshadow-color:#000000;/*立体滚动条暗边的颜色*/
scrollbar-base-color:#333333;/*滚动条的基本颜色*/
}
-->
</Style>
三、最后看一个具体运用
这是我的photo页面为方便浏览照片时添加滚动条的代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>水涟漪D相册</title>
<style type="text/css">
<!--
#tiao {
height: 260px;
width: 200px;
overflow-y:auto;
}
body {
scrollbar-face-color:#EEFAFF;
scrollbar-highlight-color:#FFF;
scrollbar-Shadow-color:#3bb8ff;
scrollbar-arrow-color:#3bb8ff;
scrollbar-track-color:#FFF;
}
-->
</style>
</head>
<body>
<div id="tiao">
<img src="myphoto/luori/lr1.jpg"/>
<img src="myphoto/luori/lr2.jpg"/>
<img src="myphoto/luori/lr3.jpg"/>
<img src="myphoto/luori/lr4.jpg"/>
<img src="myphoto/luori/lr5.jpg"/>
</body>
</html>
我把这个照片显示框的ID命名为"tiao"，在head部分设置了它的宽、高以及滚动条的颜色，DIY的滚动条就制作完成了。很简单吧~
