北京赛车 pk10开奖记录_Toyou热购彩票官网
香港高速VIP雲機房火爆上線啦!無需備案鄧俺宿,開通即用!配套《巔雲自助建站系統3.0》將帶給您飛一般的可視化拖拽建站體驗捂店,歡迎免費體驗祥蛔。

建站新聞

CSS 設置滾動條樣式的實例代碼
一佰互聯網站建設(www.yinxi.net) 發布時間踢旗︰2019-04-21 17:21:45 瀏覽數: 29
0

CSS 設置滾動條樣式的實現代碼如下所示盯汐籌︰

•::-webkit-scrollbar 滾動條整體部分•::-webkit-scrollbar-thumb  滾動條里面的小方塊罰,能向上向下移動(或往左往右移動熄兩,取決于是垂直滾動條還是水平滾動條)•::-webkit-scrollbar-track  滾動條的軌道(里面裝有Thumb)•::-webkit-scrollbar-button 滾動條的軌道的兩端按鈕仟婁,允許通過點擊微調小方塊的位置尼。•::-webkit-scrollbar-track-piece 內層軌道共 ,滾動條中間部分(除去)•::-webkit-scrollbar-corner 邊角堅睹,即兩個滾動條的交匯處•::-webkit-resizer 兩個滾動條的交匯處上用于通過拖動調整元素大小的小控件

/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/::-webkit-scrollbar{    width: 16px;    height: 16px;    background-color: #F5F5F5;}/*定義滾動條軌道 內陰影+圓角*/::-webkit-scrollbar-track{    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    border-radius: 10px;    background-color: #F5F5F5;}/*定義滑塊 內陰影+圓角*/::-webkit-scrollbar-thumb{    border-radius: 10px;    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);    background-color: #555;}

詳細設置

定義滾動條就是利用偽元素與偽類滴恫,那什麼是偽元素和偽類呢?

偽類大家應該很熟悉:link,:focus,:hover牽夸,此外CSS3中又增加了許多偽類選擇器線,如:nth-child督伴杰,:last-child緯,:nth-last-of-type()等鄙甫。

CSS中的偽元素大家以前看過犁︰:first-line,:first-letter,:before,:after隘探憑。那麼在CSS3中卷酬翔,偽元素進行了調整肖痰,在以前的基礎上增加了一個“喪餞吧︰”也就是現在變成了“::first-letter,::first-line,::before,::after”夕敖,另外CSS3還增加了一個“::selection”擾輸。兩個“僻漆︰恨憚遞︰”和一個“筏︰”在css3中主要用來區分偽類和偽元素練良捎。

webkit的偽類和偽元素的實現很強參,可以把滾動條當成一個頁面元素來定義損拳集,再結合一些高級的CSS3屬性讕躊蹬,比如漸變孟、圓角酵阿膘、RGBa等等迷救。然後如果有些地方要用圖片皮逞托,可以把圖片也可以轉換成Base64敬,不然每次都得加載那個多個圖片梅,增加請求數笆季慶。

任何對象都可以設置填繭藍︰邊框奸頸避、陰影侯勢壕、背景圖片等等附,創建的滾動條任然會按照操作系統本身的設置來完成其交互的行為挪握霉。下面的偽類可以應用到上面的偽元素中礁。有點小復雜來焙,具體怎麼寫可以看第一個demo愧黎贖,那里也有注釋力。

:horizontal//horizontal偽類適用于任何水平方向上的滾動條:vertical//vertical偽類適用于任何垂直方向的滾動條:decrement//decrement偽類適用于按鈕和軌道碎片弊。表示遞減的按鈕或軌道碎片填宦酥,例如可以使區域向上或者向右移動的區域和按鈕:increment//increment偽類適用于按鈕和軌道碎片涎商衛。表示遞增的按鈕或軌道碎片崎桶,例如可以使區域向下或者向左移動的區域和按鈕:start//start偽類適用于按鈕和軌道碎片牆放恭。表示對象(按鈕 軌道碎片)是否放在滑塊的前面:end//end偽類適用于按鈕和軌道碎片損忻。表示對象(按鈕 軌道碎片)是否放在滑塊的後面:double-button//double-button偽類適用于按鈕和軌道碎片阿劇。判斷軌道結束的位置是否是一對按鈕蛾。也就是軌道碎片緊挨著一對在一起的按鈕供麻。:single-button//single-button偽類適用于按鈕和軌道碎片勸瀝。判斷軌道結束的位置是否是一個按鈕拴。也就是軌道碎片緊挨著一個單獨的按鈕片丁謝。:no-buttonno-button偽類表示軌道結束的位置沒有按鈕藐偷糙。:corner-present//corner-present偽類表示滾動條的角落是否存在俱。:window-inactive//適用于所有滾動條筒購,表示包含滾動條的區域繞,焦點不在該窗口的時候極頰什。::-webkit-scrollbar-track-piece:start {/*滾動條上半邊或左半邊*/}::-webkit-scrollbar-thumb:window-inactive {/*當焦點不在當前區域滑塊的狀態*/}::-webkit-scrollbar-button:horizontal:decrement:hover {/*當鼠標在水平滾動條下面的按鈕上的狀態*/}

總結

以上所述是小編給大家介紹的CSS 設pk10开奖 “大王,我是烏龜呀1可是,從何著手呢?置滾動條樣式的實例代碼茶,希望對大家有所幫助吹架鵝,如果大家有任何疑問請給我留言然溉脆,小編會及時回復大家的壬配紐。在此也非常感謝大家對網頁設計網站的支持!

一佰互聯是全國知名建站品牌服務商,我們有九年網站建設酚、網站制作瓊迫彪、網頁設計迸靜、php開發和域名注冊及虛擬主機服務經驗鏈逞匹,提供的自助建站服務更是全國有名樂橇菇。近年來還整合團隊優勢自主開發了可視化多用戶”巔雲建站系統“3.0平台版躊師味,拖拽排版網站制作設計本,輕松實現pc站堿、手機微網站窩涸、小程序蒼銅、APP一體化全網營銷網站建設 婪戮嶺,已成功的為全國上百家網絡公司提供自助建站平台搭建服務抄。

上一篇女︰深入淺析CSS 選擇器分組
下一篇亮︰ CSS中有些屬性的前面會加上“*”或“_”所代表的意思
[返回新聞列表]

相關新聞more

12
05月
專業網站建設確實是一個好公司

企業在現代社會疇菠膩,要想繼續發展下去辭,要想有一個好的發展前景雷坤竄,就必須建立一個屬于自己的網站酒舉噴,需要利用這個平台來宣傳自己公司的產品沙停,這樣公司產品怎... >>詳情

27
04月
php5.4傳引用時報錯問題分析

本文實例分析了php5.4傳引用時報錯問題磕燎。分享給大家供大家參考罐鄰碘,具體如下茫︰php5.3系列版本以及以前版本餞,傳引用沒有什麼問題動青牌,升級到ph... >>詳情

05
04月
網站建設要努力獲得搜索引擎的信任

網站想要發展得好吾醒,就必須取得搜索蜘蛛的信任埂齲絆,很多朋友在建設網站的時候態度上太敷衍鞏,比方說有的網站根本不穩定醛灕佬,時常打不開頁面放課姥。這樣的閉... >>詳情

10
04月
除了專業過硬抄楷書,高級設計師都得掌握的5個能力素

我們已經或多或少看過一些優秀作品翁拱脫,也知道了一些設計方法和技巧訟,了解到了一些相關的理論知識肚訛,自己也做過一些項目或者是練習錳溺徹,總體來說都掌握了一定... >>詳情

營業執照. cdn加速服務 備案系統認證 網絡安全協會 我們的支付方式AAA認證

7x24小時服務電話:18581389571 傳真:023-85725751 免費建站交流群輕殼︰236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 網站投訴:
重慶楚捷科技有限公司 一佰互聯©版權所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保護,網站法律顧問弊蠢︰ITLAW-莊毅雄律師
中華人民共和國信息產業部網站備案號:渝ICP備12000592號
北京赛车pk10 北京赛车