網(wǎng)頁滾動(dòng)條樣式overflow的學(xué)習(xí)
今天為了制作我的相冊(cè)，來學(xué)習(xí)了一下滾動(dòng)條樣式的問題。
一、首先來了解一下overflow
overflow：內(nèi)容溢出時(shí)的設(shè)置，可以設(shè)置對(duì)象是否顯示滾動(dòng)條，
overflow-x：指水平方向內(nèi)容溢出時(shí)的設(shè)置
overflow-y：指垂直方向內(nèi)容溢出時(shí)的設(shè)置
它們?cè)O(shè)置的值為visible、scroll、hidden、auto。
visible是默認(rèn)值。使用這個(gè)值時(shí)，無論設(shè)置的"width"和"height"的值是多少，其中的內(nèi)容無論是否超出范圍都會(huì)被強(qiáng)制顯示出來。
hidden效果與visible相反。任何超出"width"和"height"的內(nèi)容都會(huì)不可見。
scroll無論內(nèi)容是否超出范圍，都會(huì)顯示滾動(dòng)條。
auto當(dāng)內(nèi)容超出范圍時(shí)，自動(dòng)顯示滾動(dòng)條，否則不顯示。
例如：
1.瀏覽器窗口不出現(xiàn)滾動(dòng)條：
a.沒有水平滾動(dòng)條：<body style="overflow-x:hidden">
b.沒有垂直滾動(dòng)條：<body style="overflow-y:hidden">
c.沒有滾動(dòng)條：<body style="overflow-x:hidden;overflow-y:hidden">
或<body style="overflow:hidden">
2.讓多行的文本隱藏滾動(dòng)條：
a.沒有水平滾動(dòng)條：<textarea style="overflow-x:hidden"></textarea>
b.沒有垂直滾動(dòng)條：<textarea style="overflow-y:hidden"></textarea>
c.沒有滾動(dòng)條：<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<body style="overflow:hidden"></textarea>
二、設(shè)定滾動(dòng)條的顏色
在瀏覽網(wǎng)頁的時(shí)候我們有時(shí)可以看到有許多網(wǎng)頁滾動(dòng)條顏色不是系統(tǒng)默認(rèn)的，而是漂亮的粉紅色或其它顏色，其實(shí)只要在網(wǎng)頁代碼中加入一些代碼就可以實(shí)現(xiàn)。
DIY屬于你自己的滾動(dòng)條，將這些代碼加入到<head></head>中間。/*這里是代碼的注釋*/
<style type="text/css">
<!--
Body {
scrollbar-face-color:#FFFFFF;/*立體滾動(dòng)條表面的顏色*/
scrollbar-highlight-color:#FFFFFF;/*滾動(dòng)條空白部分的顏色*/
scrollbar-shadow-color:#808080;/*立體滾動(dòng)條陰影的顏色*/
scrollbar-arrow-color:#000000; /*上下按鈕上三角箭頭的顏色*/
scrollbar-track-color:#E0E0E0;/*立體滾動(dòng)條滾動(dòng)區(qū)的顏色*/
scrollbar-3dlight-color:#C0C0C0;/*立體滾動(dòng)條亮邊的顏色*/
scrollbar-darkshadow-color:#000000;/*立體滾動(dòng)條暗邊的顏色*/
scrollbar-base-color:#333333;/*滾動(dòng)條的基本顏色*/
}
-->
</Style>
三、最后看一個(gè)具體運(yùn)用
這是我的photo頁面為方便瀏覽照片時(shí)添加滾動(dòng)條的代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>水漣漪D相冊(cè)</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>
我把這個(gè)照片顯示框的ID命名為"tiao"，在head部分設(shè)置了它的寬、高以及滾動(dòng)條的顏色，DIY的滾動(dòng)條就制作完成了。很簡單吧~
