首頁 > web前端 > css教學 > 設定DIV捲軸屬性與樣式的方式介紹

設定DIV捲軸屬性與樣式的方式介紹

黄舟
發布: 2017-11-17 09:43:37
原創
4250 人瀏覽過

DIV捲軸就是利用DIV標籤,在裡面嵌入CSS樣式表,當div所定義的區域的內容達到一定程度時,在div標籤裡面嵌入CSS樣式表,定義overflow的屬性值,設定DIV捲軸相關的屬性。

這裡向大家描述一下p滾動條屬性及樣式設置,所謂p滾動條,就是利用p標籤,在裡面嵌入CSS樣式表,加入overflow的屬性值,這樣,當p所規範的區域內的內容達到一定程式時,滾動條就派上用場。

p捲軸屬性及樣式設定

所謂p捲軸,就是利用p標籤,在裡面嵌入CSS樣式表,加入overflow的屬性值,這樣,當p所規範的區域內的內容達到一定程序時,滾動條就派上用場。其功能大約是為了節約頁面空間,就是所謂的「縮地」了。

當p定義的區域的內容達到一定程度時,在p標籤裡面嵌入css樣式表,定義overflow的屬性值,設定p滾動條相關的屬性。

範例程式碼:

<styletylestyletyle="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卻省值,沒有p滾動條,根據內容自動擴撐區域的大小,即定義的區域無效

scroll總是顯示滾動條

hidden沒有滾動條,超出區域的內容不可見

auto根據內容自動判斷是否要新增捲軸

2.p捲軸顏色屬性:

face-color:滑桿顏色

hightlight-color:高亮顏色

3dlight-color:三維光線顏色

darkshadow-color:暗影顏色

shadow-color:陰影顏色

arrow-color:箭頭顏色

track-color:滑軌顏色

base-color:p捲軸的主要顏色,其中包含滾動按鈕和滾動滑桿

3.overFlow-xoverFlow-y

visible卻省值,沒有p滾動條,根據內容自動擴撐區域的大小,即定義的區域無效

scroll總是顯示滾動條

hidden沒有p滾動條,超出區域的內容不可見

auto根據內容自動判斷是否添加滾動條

  1. 專家解惑p是什麼意思?

  2. JavaScript動態建立p屬性與樣式

  3. #SPAN元素與p元素的差異

  4. CSS2.0中page-break-after屬性用法

  5. #探究CSS中border:none;與border:0;的區別

#總結:

本文向大家描述p滾動條屬性及樣式設置,所謂p滾動條,就是利用p標籤,在裡面嵌入CSS樣式表,加入overflow的屬性值,這樣,當p所規範的區域內的內容達到一定程式時,滾動條就派上用場。

相關推薦:

#CSS控制捲軸樣式的解析


CSS3自訂捲軸樣式的範例詳解


#CSS設定div捲軸樣式的範例

以上是設定DIV捲軸屬性與樣式的方式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板