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

來源:互聯網
上載者:User
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捲軸樣式的樣本

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.