DIV滾動條就是利用DIV標簽,在裡面嵌入CSS樣式表,當div所定義的區域的內容達到一定程度時,在div標簽裡面嵌入CSS樣式表,定義overflow的屬性值,設置DIV滾動條相關的屬性。
這裡向大家描述一下DIV滾動條屬性及樣式設置,所謂DIV滾動條,就是利用DIV標簽,在裡面嵌入CSS樣式表,加入overflow的屬性值,這樣,當div所規范的區域內的內容達到一定程序時,滾動條就派上用場。
DIV滾動條屬性及樣式設置
所謂DIV滾動條,就是利用DIV標簽,在裡面嵌入CSS樣式表,加入overflow的屬性值,這樣,當div所規范的區域內的內容達到一定程序時,滾動條就派上用場。其功能大約是為了節約頁面空間,就是所謂的“縮地”了。看看效果如何吧,代碼在下一樓提供。
當div所定義的區域的內容達到一定程度時,在div標簽裡面嵌入css樣式表,定義overflow的屬性值,設置DIV滾動條相關的屬性。
示例代碼:
代碼如下:
<style type="text/css">
.testDiv{
border-style:solid;
border-width:50px;
border-color:pink;
position:absolute;
top:200px;
left:300px;
height:200px;
width:300px;
overFlow-x:scroll;
overFlow-y:hidden;
scrollBar-face-color:green;
scrollBar-hightLight-color:red;
scrollBar-3dLight-color:orange;
scrollBar-darkshadow-color:blue;
scrollBar-shadow-color:yellow;
scrollBar-arrow-color:purple;
scrollBar-track-color:black;
scrollBar-base-color:pink;
}
</style>
注:
1.overFlow:
visible卻省值,沒有DIV滾動條,根據內容自動擴撐區域的大小,即定義的區域無效
scroll總是顯示滾動條
hidden沒有滾動條,超出區域的內容不可見
auto根據內容自動判斷是否添加滾動條
2.DIV滾動條顏色屬性:
face-color:滑塊顏色
hightlight-color:高亮顏色
3dlight-color:三維光線顏色
darkshadow-color:暗影顏色
shadow-color:陰影顏色
arrow-color:箭頭顏色
track-color:滑道顏色
base-color:DIV滾動條的主要顏色,其中包含滾動按鈕和滾動滑塊
3.overFlow-xoverFlow-y
visible卻省值,沒有DIV滾動條,根據內容自動擴撐區域的大小,即定義的區域無效
scroll總是顯示滾動條
hidden沒有DIV滾動條,超出區域的內容不可見
auto根據內容自動判斷是否添加滾動條