平常大家在設計時,都會希望連捲軸顏色都是一致的,
所以今天來教大家怎麼在寫CSS語法時,把你的捲軸變色吧^^


你可以在html{}←整體頁面的地方加上,
如此會整體所有有捲軸的地方全都變成一樣的!!

亦可以在你想加的部份加上捲軸~例如:
#recent-article .box{}最新文章區整體(將包括側欄標題)
或#recent-article .box-text{}最新文章內容區塊
只要你在該CSS語法中,加上↓
overflow: auto;　/*捲軸呈現*/
overflow: hidden;　/*刪除捲軸*/
overflow-x: hidden;　/*刪除水平捲軸*/
overflow-y: hidden;　/*刪除垂直捲軸*/

除此之外,當你加上了捲軸之後在該區塊你再加上↓
height: 200px;　/*內容高度*/
width: 80px;　/*內容寬度*/
該區塊的內容高度變會維持在200px,而寬度為80px...
然後呈現捲軸!!

範例:
#latest-comment .box-text{overflow: auto; overflow-x: hidden; height: 300px; }



接下來,我們可以加上捲軸的顏色~
scrollbar-face-color: 色碼　/*設定軸面顏色*/
scrollbar-highlight-color: 色碼　/*設定拉頁內框亮面*/
scrollbar-shadow-color: 色碼　/*設定拉頁內框暗面*/
scrollbar-3dLight-color: 色碼　/*設定拉頁框立體亮面色 */
scrollbar-darkshadow-color: 色碼　/*設定拉頁框立體暗面色 */
scrollbar-arrow-color: 色碼　/*設定拉頁框箭頭色 */
scrollbar-track-color: 色碼　/*設定拉頁框背景色 */
這樣就好囉!!可以去看看我們呈現的成果囉~
別忘了色碼要加上#喔!!例如:#ffffff是白色~



不過根據A. Q.的實驗,FF會有無法呈現捲軸的效果!!
詳細原因A. Q.也還不知道~朋友們可以自己試試看喲!!

附上一些色碼表,和一些教學範例網站~不懂再問我喔!
Color-cord　http://rhinejo.myweb.hinet.net/home/color/color-cord.html
Html色碼表　http://www.lses.tp.edu.tw/colortable.htm
i-web網頁教學　http://www.i-webhk.com/go.php?tt=bs04&id=8
MyChat.to染布坊　http://dye.mychat.to/scrollbar_edit.htm







文章標籤
全站熱搜
創作者介紹
創作者 貓貓 的頭像
貓貓

NekoFitness Life

貓貓 發表在 痞客邦 留言(23) 人氣(2,592)