新聞中心
在 HTML 網(wǎng)頁中,我們都知道大篇幅的長(zhǎng)文章會(huì)占據(jù)網(wǎng)頁的大部分空間,影響了整體網(wǎng)站頁面的美觀性和閱讀體驗(yàn),因此,在 html 網(wǎng)頁中添加一個(gè)帶有滾動(dòng)條的文本框,就可以很好地解決上述問題。網(wǎng)頁滾動(dòng)條本身就是瀏覽器的一部分,使用它可以方便瀏覽較大的網(wǎng)頁,下面就是相關(guān)語法:

公司主營業(yè)務(wù):成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳,提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化,感謝他們對(duì)我們的高要求,感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn),讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出羅山免費(fèi)做網(wǎng)站回饋大家。
實(shí)例
color: #ffffff;
background-color: #000000;
border: solid 2px black;
width: 120px;
height: 200px;
overflow: scroll;
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
上述語法生成一個(gè)帶有黑色背景及灰藍(lán)色邊框的文本滾動(dòng)框。語法里的參數(shù)相當(dāng)簡(jiǎn)單,主要是控制不同部分的色彩,你可以做相應(yīng)變化并在預(yù)覽中觀看實(shí)際效果。至于調(diào)整文本框的大小,你可以在插入此語法后退出HTML編輯模式,然后在日志編輯頁面使用鼠標(biāo)直接進(jìn)行調(diào)整。
html中滾動(dòng)條屬性設(shè)置
?
scrollbar?屬性、樣式詳解
1、?
overflow?內(nèi)容溢出時(shí)的設(shè)置(設(shè)定被設(shè)定對(duì)象是否顯示滾動(dòng)條)
?
overflow-x?水平方向內(nèi)容溢出時(shí)的設(shè)置
?
overflow-y?垂直方向內(nèi)容溢出時(shí)的設(shè)置
以上三個(gè)屬性設(shè)置的值為?
visible?(默認(rèn)值)、?
scroll?、?
hidden??
、auto?。
2、?
scrollbar-3d-light-color?立體滾動(dòng)條亮邊的顏色(設(shè)置滾動(dòng)條的顏色)
?
scrollbar-arrow-color?上下按鈕上三角箭頭的顏色
?
scrollbar-base-color?滾動(dòng)條的基本顏色
?
scrollbar-dark-shadow-color?立體滾動(dòng)條強(qiáng)陰影的顏色
?
scrollbar-face-color?立體滾動(dòng)條凸出部分的顏色
?
scrollbar-highlight-color?滾動(dòng)條空白部分的顏色
?
scrollbar-shadow-color?立體滾動(dòng)條陰影的顏色
我們通過幾個(gè)實(shí)例來講解上述的樣式屬性:
1.讓瀏覽器窗口永遠(yuǎn)都不出現(xiàn)滾動(dòng)條
沒有水平滾動(dòng)條
沒有垂直滾動(dòng)條
沒有滾動(dòng)條
或
style="overflow:hidden">
2.設(shè)定多行文本框的滾動(dòng)條
沒有水平滾動(dòng)條
沒有垂直滾動(dòng)條
沒有滾動(dòng)條
或
3.設(shè)定窗口滾動(dòng)條的顏色
設(shè)置窗口滾動(dòng)條的顏色為紅色
scrollbar-base-color設(shè)定的是基本色,一般情況下只需要設(shè)置這一個(gè)屬性就可以達(dá)到改變滾動(dòng)條顏色的目的。
加上一點(diǎn)特別的效果:
4.在樣式表文件中定義好一個(gè)類,調(diào)用樣式表。
這樣調(diào)用:
?Scrollbar-Face-Color?為滾動(dòng)條表面顏色設(shè)定;
?Scrollbar-Highlight-Color?為滾動(dòng)條上斜面和左斜面顏色設(shè)定;
?Scrollbar-Shadow-Color?為滾動(dòng)條下斜面和右斜面顏色設(shè)定;
?Scrollbar-3Dlight-Color?為滾動(dòng)條上邊和左邊的邊沿顏色設(shè)定;
?Scrollbar-Arrow-Color?為滾動(dòng)條兩端箭頭顏色設(shè)定。
?Scrollbar-Track-Color?為滾動(dòng)條底板顏色設(shè)定;
?Scrollbar-Darkshadow?為滾動(dòng)條下邊和右邊邊沿顏色設(shè)定。
舉例:
HTML各種滾動(dòng)屬性代碼
html滾動(dòng)條顏色設(shè)置方法介紹
?
scrollbar-arrow-color: color; ?/*三角箭頭的顏色*/
?
scrollbar-face-color: color;? /*立體滾動(dòng)條的顏色(包括箭頭部分的背景色)*/
?
scrollbar-3dlight-color: color; ?/*立體滾動(dòng)條亮邊的顏色*/
?
scrollbar-highlight-color: color;? /*滾動(dòng)條的高亮顏色(左陰影?)*/
?
scrollbar-shadow-color: color;? /*立體滾動(dòng)條陰影的顏色*/
?
scrollbar-darkshadow-color: color;? /*立體滾動(dòng)條外陰影的顏色*/
?
scrollbar-track-color: color; ?/*立體滾動(dòng)條背景顏色*/
?
scrollbar-base-color: color; ?/*滾動(dòng)條的基色*/
?
webkit?不再是用簡(jiǎn)單的幾個(gè)CSS屬性,而是一坨的CSS偽元素:
?
-webkit-scrollbar ?滾動(dòng)條整體部分
?
-webkit-scrollbar-button? 滾動(dòng)條兩端的按鈕
?
-webkit-scrollbar-track ?外層軌道
?
-webkit-scrollbar-track-piece? 內(nèi)層軌道,滾動(dòng)條中間部分(除去)
?
-webkit-scrollbar-thumb? (拖動(dòng)條?滑塊?滾動(dòng)條里面可以拖動(dòng)的那個(gè),腫么翻譯好呢?)
?
-webkit-scrollbar-corner? 邊角
?
-webkit-resizer ?定義右下角拖動(dòng)塊的樣式
通過這些偽元素,可以完全的重寫一個(gè)網(wǎng)站的滾動(dòng)條樣式。
當(dāng)然webkit提供的不止這些,還有很多偽類,可以更豐富滾動(dòng)條樣式:
?
:horizontal – horizontal?偽類應(yīng)用于水平方向的滾動(dòng)條 ?
:vertical – vertical?偽類應(yīng)用于豎直方向的滾動(dòng)條
?
:decrement – decrement?偽類應(yīng)用于按鈕和內(nèi)層軌道(track piece)。它用來指示按鈕或者內(nèi)層軌道是否會(huì)減小視窗的位置(比如,垂直滾動(dòng)條的上面,水平滾動(dòng)條的左邊。) ?
:increment – increment?偽類和?
decrement?類似,用來指示按鈕或內(nèi)層軌道是否會(huì)增大視窗的位置(比如,垂直滾動(dòng)條的下面和水平滾動(dòng)條的右邊。)
?
:start – start?偽類也應(yīng)用于按鈕和滑塊。它用來定義對(duì)象是否放到滑塊的前面。
?
:end ?類似于start偽類,標(biāo)識(shí)對(duì)象是否放到滑塊的后面。
?
:double-button ?該偽類以用于按鈕和內(nèi)層軌道。用于判斷一個(gè)按鈕是不是放在滾動(dòng)條同一端的一對(duì)按鈕中的一個(gè)。對(duì)于內(nèi)層軌道來說,它表示內(nèi)層軌道是否緊靠一對(duì)按鈕。
?
:single-button? 類似于double-button偽類。對(duì)按鈕來說,它用于判斷一個(gè)按鈕是否自己獨(dú)立的在滾動(dòng)條的一段。對(duì)內(nèi)層軌道來說,它表示內(nèi)層軌道是否緊靠一個(gè)single-button。
?
:no-button? 用于內(nèi)層軌道,表示內(nèi)層軌道是否要滾動(dòng)到滾動(dòng)條的終端,比如,滾動(dòng)條兩端沒有按鈕的時(shí)候。
?
:corner-present ? 用于所有滾動(dòng)條軌道,指示滾動(dòng)條圓角是否顯示。
?
:window-inactive? 用于所有的滾動(dòng)條軌道,指示應(yīng)用滾動(dòng)條的某個(gè)頁面容器(元素)是否當(dāng)前被激活。(在webkit最近的版本中,該偽類也可以用于::selection偽元素。webkit團(tuán)隊(duì)有計(jì)劃擴(kuò)展它并推動(dòng)成為一個(gè)標(biāo)準(zhǔn)的偽類)
另外,?
:enabled?、?
:disabled?、?
:hover? 和 ?
:active? 等偽類同樣可以用于滾動(dòng)條中。
html滾動(dòng)條的使用技巧
(1)隱藏滾動(dòng)條
(2)如何在單元格或圖層中出現(xiàn)滾動(dòng)條
(3)javascript改變框架中滾動(dòng)條的樣式,比如改變顏色、改為平面效果等
說明:
?scrollbar-3dlight-color:color?;設(shè)置或檢索滾動(dòng)條亮邊框顏色;
?scrollbar-highlight-color:color?;設(shè)置或檢索滾動(dòng)條3D界面的亮邊顏色;
?scrollbar-face-color:colo?r?;設(shè)置或檢索滾動(dòng)條3D表面的顏色;
?scrollbar-arrow-color:color?;設(shè)置或檢索滾動(dòng)條方向箭頭的顏色;當(dāng)滾動(dòng)條出現(xiàn)但不可用時(shí),此屬性失效;
?scrollbar-shadow-color:color?;設(shè)置或檢索滾動(dòng)條3D界面的暗邊顏色;
?scrollbar-darkshadow-color:color?;設(shè)置或檢索滾動(dòng)條暗邊框顏色;
?scrollbar-base-color:color?;設(shè)置或檢索滾動(dòng)條基準(zhǔn)顏色。其它界面顏色將據(jù)此自動(dòng)調(diào)整。
?scrollbar-track-color:color?;設(shè)置或檢索滾動(dòng)條的拖動(dòng)區(qū)域顏色
備注:
color為你要設(shè)置的顏色代碼,可以是16進(jìn)制的,比如#FF0000,可以是以RGB表示的,比如rgb(255,0,255);設(shè)置滾動(dòng)條樣式的時(shí)候不必要把所有的屬性都用上才會(huì)生效。
(4)javascript 中的頁面元素定位
?clientX?、?clientY?是鼠標(biāo)當(dāng)前相對(duì)于網(wǎng)頁的位置,當(dāng)鼠標(biāo)位于頁面左上角時(shí) clientX=0, clientY=0;
?offsetX?、?offsetY?是鼠標(biāo)當(dāng)前相對(duì)于網(wǎng)頁中的某一區(qū)域的位置,當(dāng)鼠標(biāo)位于頁面中這一區(qū)域的左上角時(shí) offsetX=0, offsetY=0;
?screenX?、?screenY?是鼠標(biāo)相對(duì)于用戶整個(gè)屏幕的位置;
x、y 是鼠標(biāo)當(dāng)前相對(duì)于當(dāng)前瀏覽器的位置
?scrollLeft?:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離(因?yàn)橛袧L動(dòng)條的產(chǎn)生,所以目前頁面可見內(nèi)容是不定的)。
?scrollTop?:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見內(nèi)容的最頂端之間的距離。
?left?:對(duì)象相對(duì)于頁面的X坐標(biāo)。
?top?:對(duì)象相對(duì)于頁面的Y坐標(biāo)
(5)屏蔽選擇,右鍵等
下面的這個(gè)小例子是 實(shí)現(xiàn)滾動(dòng)條根據(jù)窗體的大小自動(dòng)設(shè)置
[html]
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
class="MainDIV">
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ
滾動(dòng)條的使用是很常見的,它的相關(guān)知識(shí)也是相當(dāng)?shù)亩?希望自己能在不斷的學(xué)習(xí)中,不斷的總結(jié),使自己的學(xué)習(xí)能力和學(xué)習(xí)效率能有一定的提高.
文章標(biāo)題:創(chuàng)新互聯(lián)HTML教程:html中滾動(dòng)條屬性設(shè)置
標(biāo)題URL:http://m.fisionsoft.com.cn/article/djpojdo.html


咨詢
建站咨詢
