|
導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言,通過(guò)結(jié)合使用其他的Web技術(shù)(如:腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而,超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)(Web)編程的基礎(chǔ),也就是說(shuō)萬(wàn)維網(wǎng)是建立... 網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言,通過(guò)結(jié)合使用其他的Web技術(shù)(如:腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等),可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而,超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)(Web)編程的基礎(chǔ),也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱(chēng)為超文本標(biāo)記語(yǔ)言,是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。 隨著互聯(lián)網(wǎng)的發(fā)展,人們對(duì)頁(yè)面的要求越來(lái)越高,不只是功能好用,而且還要顏值高。前端開(kāi)發(fā)人員對(duì)于瀏覽器的滾動(dòng)條并不陌生,當(dāng)自帶的一些滾動(dòng)條無(wú)法滿(mǎn)足我們的審美時(shí),你知道如何用CSS修改瀏覽器滾動(dòng)條的樣式嗎?今天就給大家介紹如何設(shè)置div滾動(dòng)條樣式。有需要的小伙伴可以參考一下。我們?cè)?strong>自定義滾動(dòng)條樣式前,首先要了解滾動(dòng)條的結(jié)構(gòu)。通俗來(lái)講,滾動(dòng)條由兩部分組成:一部分是可以滑動(dòng)的部分,我們稱(chēng)它為滑塊;另一部分是滾動(dòng)條的軌道,也就是滑塊的軌道,一般來(lái)說(shuō),為了美觀(guān),滑塊的顏色要比軌道的顏色深一些。 首先介紹滾動(dòng)條相關(guān)的CSS代碼,以及他們的含義 ::-webkit-scrollbar:指滾動(dòng)條整體部分,它的屬性有width,height,background等 但是最常用的是滾動(dòng)條整體部分(-webkit-scrollbar),滑塊(-webkit-scrollbar-thumb)以及外軌道( -webkit-scrollbar-track)三部分。 接下來(lái)我們將div盒子里面超出的部分隱藏,給div設(shè)置滾動(dòng)條樣式,看看怎么用CSS實(shí)現(xiàn)滾動(dòng)條樣式。 HTML部分: <div class="scroll">
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
have a nice day <br/>
</div>CSS部分: .scroll{
margin:100px auto;
border: 1px solid #000;
width: 200px;
height: 300px;
overflow: auto;
}
.scroll::-webkit-scrollbar {
width: 10px;
height: 10px;
}
/*正常情況下滑塊的樣式*/
.scroll::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.05);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*鼠標(biāo)懸浮在該類(lèi)指向的控件上時(shí)滑塊的樣式*/
.scroll:hover::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.2);
border-radius: 10px;
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*鼠標(biāo)懸浮在滑塊上時(shí)滑塊的樣式*/
.scroll::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0,.4);
-webkit-box-shadow: inset 1px 1px 0 rgba(0,0,0,.1);
}
/*正常時(shí)候的主干部分*/
.scroll::-webkit-scrollbar-track {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
background-color: white;
}
/*鼠標(biāo)懸浮在滾動(dòng)條上的主干部分*/
.scroll::-webkit-scrollbar-track:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.4);
background-color: rgba(0,0,0,.01);
}效果圖:
以上就是如何用CSS修改瀏覽器滾動(dòng)條的樣式(實(shí)例詳解)的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章! 網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ),涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。 |
溫馨提示:喜歡本站的話(huà),請(qǐng)收藏一下本站!