自訂捲軸顏色
(Dreamweaver以下簡稱DR)
效果：可加強網站視覺統一。
方法： 一、建立外部連結CSS檔案
1.在DR開啟新的HTML頁面並儲存
2.開啟CSS樣式面板
3.新增CSS樣式規則(圖一)

4.開啟存檔的css檔案輸入以下資料

body {
scrollbar-face-color: #FCFCFC; /*（軸面顏色）
scrollbar-shadow-color: #E1E1E1;　/*（軸面右角邊顏色
scrollbar-highlight-color: #FCFCFC;　/*（軸面左角邊顏色）
scrollbar-3dlight-color:#FFFFFF; /*（左立體邊顏色）
scrollbar-darkshadow-color: #E5E6EE;/*（右立體邊顏色）
scrollbar-track-color: #FFFFFF;　/*（軸軌顏色）
scrollbar-arrow-color: #044587　/*（箭頭顏色） }

二、在想要變換捲軸顏色的網頁中輸入連結
<CSS檔名.css" rel="CSS檔名" type="CSS檔名/css">

p.s 若兩個網頁要有兩種不同色的視窗捲軸，就設兩個不同色彩的CSS檔，
網頁外部連結至想要的色彩CSS檔。
另外，若您的網頁裡有「文字區域」，它的捲軸也會變成所設的顏色。

備註： 如果什麼設好了，捲軸卻沒變色，
請看一下在DR裡的原始碼，最上面有沒有
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">？
如果有的話，就把那串網址刪掉，變成
再附註： 可以把body換成html，就不用刪原始碼了

以上資訊參考自筆記本 



以下範例為版主自行模仿viva-graphic網站

body { scrollbar-face-color: #008080;
scrollbar-shadow-color: #008080;
scrollbar-highlight-color: #00BDBD;
scrollbar-3dlight-color:#006A6A;
scrollbar-darkshadow-color: #006A6A;
scrollbar-track-color: #cccccc;
scrollbar-arrow-color: #ffffff }

 

其他相關自訂捲軸Scroll bar的相關支援

I E 濾鏡之內置框架捲軸透視
http://www.hsiu28.net/style/article_ie.php?id=8

捲軸顏色產生器IE5.5+
http://www.khjh.kh.edu.tw/mewawa/dw4/scroll-color.htm

捲軸相關設定解釋與語法取用
http://www.cyber-junkie.com/tools/scrollbargen/index.php


arrow
arrow
    全站熱搜

    vmaya 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄