DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> DIV滾動條屬性
DIV滾動條屬性
編輯:布局實例     

 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根據內容自動判斷是否添加滾動條

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved