DIV中Scroll屬性如何使用,很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
網(wǎng)站建設(shè)哪家好,找成都創(chuàng)新互聯(lián)公司!專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了元謀免費建站歡迎大家使用!
DIV Scroll屬性
DIV Scroll屬性詳解,為DIV層打造不同的滾動條。
一、scrollbar屬性、樣式詳解
1.overflow內(nèi)容溢出時的設(shè)置(設(shè)定被設(shè)定對象是否顯示滾動條)
overflow-x水平方向內(nèi)容溢出時的設(shè)置
overflow-y垂直方向內(nèi)容溢出時的設(shè)置
以上屬性設(shè)置的值為visible(默認值)、scroll(出現(xiàn)滾動條)、hidden(隱藏)、auto()瀏覽器自動設(shè)置)。
2.scrollbar-3d-light-color立體滾動條亮邊的顏色(設(shè)置滾動條的顏色)
scrollbar-arrow-color上下按鈕上三角箭頭的顏色
scrollbar-base-color滾動條的基本顏色
scrollbar-dark-shadow-color立體滾動條強陰影的顏色
scrollbar-face-color立體滾動條凸出部分的顏色
scrollbar-highlight-color滾動條空白部分的顏色
scrollbar-shadow-color立體滾動條陰影的顏色
二、我們通過幾個實例來講解上述的樣式屬性:
1.設(shè)定多行文本框的滾動條
沒有水平滾動條
<textareastyletextareastyle="overflow-x:hidden"></textarea>
沒有垂直滾動條
<textareastyletextareastyle="overflow-y:hidden"></textarea>
沒有滾動條
<textareastyletextareastyle="overflow-x:hidden; overflow-y:hidden"></textarea> 或<textareastyletextareastyle="overflow:hidden"></textarea>
2.讓瀏覽器窗口永遠都不出現(xiàn)滾動條
沒有水平滾動條
<bodystylebodystyle="overflow-x:hidden">
沒有垂直滾動條
<bodystylebodystyle="overflow-y:hidden">
沒有滾動條
<bodystylebodystyle="overflow-x:hidden;overflow-y:hidden"> 或<bodystylebodystyle="overflow:hidden">
3.在樣式表文件中定義好一個類,調(diào)用樣式表。
<style> .coolscrollbar{scrollbar-arrow-color:yellow; scrollbar-base-color:lightsalmon;} </style>
這樣調(diào)用:
<textareaclasstextareaclass="coolscrollbar"></textarea>
Scrollbar-Face-Color為滾動條表面顏色設(shè)定;
Scrollbar-Highlight-Color為滾動條上斜面和左斜面顏色設(shè)定;
Scrollbar-Shadow-Color為滾動條下斜面和右斜面顏色設(shè)定;
Scrollbar-3Dlight-Color為滾動條上邊和左邊的邊沿顏色設(shè)定;
Scrollbar-Arrow-Color為滾動條兩端箭頭顏色設(shè)定。
Scrollbar-Track-Color為滾動條底板顏色設(shè)定;
Scrollbar-Darkshadow為滾動條下邊和右邊邊沿顏色設(shè)定。
實例:
body{ background-color:#ffffff; color:#336699; SCROLLBAR-FACE-COLOR:#BED8EB; SCROLLBAR-SHADOW-COLOR:#DDF8FF; SCROLLBAR-HIGHLIGHT-COLOR:#92C0D1; SCROLLBAR-3DLIGHT-COLOR:#DDF8FF; SCROLLBAR-DARKSHADOW-COLOR:#92C0D1; SCROLLBAR-TRACK-COLOR:#BED8EB; SCROLLBAR-ARROW-COLOR:#92C0D1 }
4.設(shè)定窗口滾動條的顏色
設(shè)置窗口滾動條的顏色為紅色<bodystyle="scrollbar-base-color:red">
scrollbar-base-color設(shè)定的是基本色,一般情況下只需要設(shè)置這一個屬性就可以達到改變滾動條顏色的目的。
加上一點特別的效果:
<bodystylebodystyle="scrollbar-arrow-color:yellow; scrollbar-base-color:lightsalmon">
看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。
網(wǎng)頁名稱:DIV中Scroll屬性如何使用
分享URL:http://m.rwnh.cn/article24/jdipje.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)、商城網(wǎng)站、云服務(wù)器、用戶體驗、營銷型網(wǎng)站建設(shè)、網(wǎng)站策劃
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)