CSS樣式設(shè)置div滾動(dòng)條示例代碼
發(fā)布時(shí)間:2013-12-24 16:58:39 作者:佚名
我要評(píng)論

使用CSS樣式設(shè)置div滾動(dòng)條,直接充當(dāng)了文本框的角色,下面為大家介紹下具體的實(shí)現(xiàn),感興趣的朋友可以參考下
復(fù)制代碼
代碼如下:.scroll{
width:100px;
height:200px;
overflow:auto; /*自動(dòng)出現(xiàn)滾動(dòng)條,如果要出現(xiàn)豎直滾動(dòng)條則改成:overflow-y:auto,如果橫向出現(xiàn)滾動(dòng)條則改成:overflow-x:auto*/
scrollbar-face-color:#F00; /*滾動(dòng)條凸出部分的顏色(前景色),包括兩端的方形按鈕、水平或豎直滑動(dòng)的滑塊的顏色*/
scrollbar-track-color:#FFF; /*滾動(dòng)條的背景顏色,如果省略的話將出現(xiàn)虛點(diǎn),顏色將采用face-color的顏色*/
scrollbar-arrow-color:#FFF;<span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">/*按鈕(上下或者左右可以點(diǎn)擊使滑塊滾動(dòng)的方形按鈕)上三角箭頭的顏色*/</span>
scrollbar-3dlight-color:#0F0; /*滾動(dòng)條亮邊的顏色,形成3D效果,有層次感,肉眼觀察在滾動(dòng)條左邊及上邊出現(xiàn)一條有色線(豎直方向滾動(dòng))*/
scrollbar-darkshadow-color:#00F; /*滾動(dòng)條強(qiáng)陰影的顏色,肉眼觀察出現(xiàn)滾動(dòng)條下邊及右邊*/
scrollbar-highlight-color:#F0F; /*滾動(dòng)條空白部分的顏色,肉眼觀察改變不明顯,具體顏色改變出現(xiàn)在左邊和上邊空白處,介于face-color效果與3dlingt-color效果之間有個(gè)空白顏色(默認(rèn)為白色)。此外,滾動(dòng)條前景色有種凹陷的感覺(jué),周邊線條顏色凸起*/
scrollbar-shadow-color:#006600; /*立體滾動(dòng)條陰影的顏色,具體出現(xiàn)在滑塊及方形按鈕的右邊及下邊,形成陰影效果,顏色介于face-color效果和darkshadow-color效果之間,不是很明顯*/
scrollbar-base-color:#0f0; /*滾動(dòng)條的基本顏色,當(dāng)前面7個(gè)效果出現(xiàn)時(shí),滾動(dòng)條基本顏色設(shè)置肉眼很難觀察到,如果不設(shè)置前面7個(gè)效果,系統(tǒng)將根據(jù)base-color自動(dòng)設(shè)置,其中前景色,背景色(虛點(diǎn)表示)顏色一致,其他效果(陰影以黑色填充),沒(méi)有什么要求時(shí),建議不設(shè)置此效果*/
復(fù)制代碼
代碼如下:/*
scrollbar-face-color:#F00;
scrollbar-track-color:#FFF;
scrollbar-arrow-color:#FFF;
這3個(gè)效果建議必須設(shè)置
*/
}
.font{ color:#006600}
復(fù)制代碼
代碼如下:<div class="scroll">
<p>魔天記無(wú)彈窗</p>
<p>筆趣閣</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
<p>文字內(nèi)容</p>
</div>
相關(guān)文章
純div+css實(shí)現(xiàn)的固定在網(wǎng)站底部不隨網(wǎng)站滾動(dòng)的在線客服特效源碼
本款是一段由純div+css代碼是實(shí)現(xiàn)的將在線客服功能控制在網(wǎng)站底部不隨網(wǎng)頁(yè)滾動(dòng)條滾動(dòng)而改變位置的特效源碼,運(yùn)行流暢,反應(yīng)速度靈敏,是一段非常優(yōu)秀的特效源碼2014-10-27CSS控制DIV永遠(yuǎn)固定在頁(yè)面底部不隨滾動(dòng)而滾動(dòng)
控制DIV永遠(yuǎn)固定在頁(yè)面底部的方法有很多,基本上都是通過(guò)css或js來(lái)實(shí)現(xiàn)的,本節(jié)也實(shí)現(xiàn)了一個(gè)這樣的效果,大家可以學(xué)習(xí)下2014-06-03css將div層固定顯示在頁(yè)面底部不隨滾動(dòng)條滾動(dòng)
將div層固定顯示在頁(yè)面底部,在某些情況下還是很實(shí)用的,在本文為大家介紹下使用css是如何實(shí)現(xiàn)的,需要的碰可以參考下2013-11-20css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條(圖片或文字等超出時(shí)顯示)
css實(shí)現(xiàn)div自動(dòng)添加滾動(dòng)條比較實(shí)用的功能,當(dāng)圖片或文字超出div所規(guī)定的寬或高時(shí),會(huì)自動(dòng)出現(xiàn)滾動(dòng)條,這一點(diǎn)還是比較有利于用戶體驗(yàn)的,本文整理了一些實(shí)現(xiàn)自動(dòng)滾動(dòng)條的方2013-01-25div css 滾動(dòng)條樣式 DIV滾動(dòng)條屬性及樣式設(shè)置方式
所謂DIV滾動(dòng)條,就是利用DIV標(biāo)簽,在里面嵌入CSS樣式表,加入overflow的屬性值,這樣,當(dāng)div所規(guī)范的區(qū)域內(nèi)的內(nèi)容達(dá)到一定程序時(shí),滾動(dòng)條就派上用場(chǎng),這里為你介紹DIV滾動(dòng)條2012-12-23css 給div添加滾動(dòng)并隱藏滾動(dòng)條
這篇文章主要介紹了css 給div添加滾動(dòng)并隱藏滾動(dòng)條的實(shí)例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-09