如何用CSS設(shè)置滾動(dòng)條顏色?_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
我們?cè)跒g覽網(wǎng)頁的時(shí)候有時(shí)可以看到網(wǎng)頁滾動(dòng)條顏色不是系統(tǒng)默認(rèn)的樣式,而是漂亮的紅色或其它顏色樣式,其實(shí)這就是在網(wǎng)頁代碼之間加入代碼來實(shí)現(xiàn)的,具體是哪些代碼呢?
頁面滾動(dòng)條代碼及其解釋如下:
示例代碼 [hl5o.cn]
scrollbar-3d-light-color 設(shè)置或檢索滾動(dòng)條亮邊框顏色
scrollbar-highlight-color 設(shè)置或檢索滾動(dòng)條3D界面的亮邊(ThreedHighlight)顏色
scrollbar-face-color 設(shè)置或檢索滾動(dòng)條3D表面(ThreedFace)的顏色
scrollbar-arrow-color 設(shè)置或檢索滾動(dòng)條方向箭頭的顏色
scrollbar-shadow-color 設(shè)置或檢索滾動(dòng)條3D界面的暗邊(ThreedShadow)顏色
scrollbar-dark-shadow-color 設(shè)置或檢索滾動(dòng)條暗邊框(ThreedDarkShadow)顏色
scrollbar-base-color 設(shè)置或檢索滾動(dòng)條基準(zhǔn)顏色。其它界面顏色將據(jù)此自動(dòng)調(diào)整
scrollbar-highlight-color 設(shè)置或檢索滾動(dòng)條3D界面的亮邊(ThreedHighlight)顏色
scrollbar-face-color 設(shè)置或檢索滾動(dòng)條3D表面(ThreedFace)的顏色
scrollbar-arrow-color 設(shè)置或檢索滾動(dòng)條方向箭頭的顏色
scrollbar-shadow-color 設(shè)置或檢索滾動(dòng)條3D界面的暗邊(ThreedShadow)顏色
scrollbar-dark-shadow-color 設(shè)置或檢索滾動(dòng)條暗邊框(ThreedDarkShadow)顏色
scrollbar-base-color 設(shè)置或檢索滾動(dòng)條基準(zhǔn)顏色。其它界面顏色將據(jù)此自動(dòng)調(diào)整
我們來看下面CSS設(shè)置滾動(dòng)條顏色的實(shí)例:
代碼調(diào)試框 [hl5o.cn][ 可先修改部分代碼 再運(yùn)行查看效果 ]
請(qǐng)注重,有些朋友在實(shí)際的使用中,CSS定義了滾動(dòng)條顏色,可測(cè)試時(shí)發(fā)現(xiàn)并沒有起作用。這到底是什么原因呢?
請(qǐng)注重定義滾動(dòng)條顏色CSS代碼的選擇符!在以往的教程中,選擇符定義為Body即實(shí)現(xiàn)了改變滾動(dòng)條顏色的效果。而現(xiàn)在最好將選擇符改成html!如上面的實(shí)例所示。
在你使用的時(shí)候,參考上面的代碼只要改變顏色值就可以了。凡是#號(hào)后面的,都是顏色代碼,顏色代碼為16進(jìn)制。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 如何實(shí)現(xiàn)hover懸停鏈接文字產(chǎn)生陰影?
- 5個(gè)你該知道的CSS3新技術(shù)
- 如何規(guī)范的對(duì)CSSsel
- Web標(biāo)準(zhǔn)設(shè)計(jì)技巧之三布局深入
- CSSSprites工作原理及其對(duì)CSS布局的意義、優(yōu)點(diǎn)和缺點(diǎn)介紹
- WEB2.0標(biāo)準(zhǔn)教程:第四天調(diào)用樣式表
- 5個(gè)css布局的常見問題及解決方法
- DW中的可視化效果與瀏覽器的為什么不同?
- dreamweaver套用源格式,將混亂無序的代碼變得整潔
- DivCSS:并非所有內(nèi)容都必須要div做“容器”
猜你也喜歡看這些
- 用“ul li”及css制作韓國(guó)風(fēng)格菜單
- css圓角之有序列表dl、無序列表ul如何實(shí)現(xiàn)?
- 圖片邊框變換CSSHover狀態(tài)效果一例
- CSS表格樣式:CSS JS打造可伸縮的表格
- DivCSS布局實(shí)例:三行單列上下固定高度中間自適應(yīng)
- DivCSS實(shí)例:CSS菜單Flash效果用圖片模擬實(shí)現(xiàn)
- CSS菜單:明快清新的格調(diào)闡述CSS當(dāng)前頁效果的實(shí)現(xiàn)
- CSS實(shí)例:三列自適應(yīng)等高且中列寬度自適應(yīng)
- CSS布局欣賞:淘寶首頁布局效果
- CSS實(shí)例:非常不錯(cuò)的鼠標(biāo)懸停TIP效果!
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-如何用CSS設(shè)置滾動(dòng)條顏色?
。