哈哈!終於出第3篇了
先在來教教如何改網頁旁邊的卷軸
並且教你讓原本沒有卷軸的區塊以捲軸呈現
接下來為大家介紹一個方便的網址
爪哇島(http://cdh.idv.tw/cdh/no04.htm)
點進去就可以開始設計卷軸
先點文字的選項在點色版選取自己想要的顏色
在開始點選的時候,右邊的拉條也會跟著變化
方便自己調整
最後設計玩的時候下面會呈現css碼
看阿!多方便阿!
也順便解說一下文法的意思
SCROLLBAR-FACE-COLOR : 色碼 ;
軸面顏色
SCROLLBAR-HIGHLIGHT-COLOR: 色碼 ;
軸面三角左邊顏色
SCROLLBAR-SHADOW-COLOR: 色碼 ;
軸面三角右邊顏色
SCROLLBAR-3DLIGHT-COLOR: 色碼 ;
左邊立體邊顏色
SCROLLBAR-ARROW-COLOR: 色碼 ;
箭頭顏色
SCROLLBAR-TRACK-COLOR: 色碼 ;
軸軌顏色
SCROLLBAR-DARKSHADOW-COLOR: 色碼 ;
右邊立體邊顏色
接下來設計好之後看到下面的語法會呈現以下的樣子
<style>
BODY {
SCROLLBAR-FACE-COLOR: #000;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #fff;
SCROLLBAR-ARROW-COLOR: #fff;
SCROLLBAR-TRACK-COLOR: #fff;
SCROLLBAR-DARKSHADOW-COLOR: #fff;
SCROLLBAR-BASE-COLOR: #fff
}
</style>
但是其實上面的這些要的只有框符內的東西
也就是
SCROLLBAR-FACE-COLOR: #000;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #fff;
SCROLLBAR-ARROW-COLOR: #fff;
SCROLLBAR-TRACK-COLOR: #fff;
SCROLLBAR-DARKSHADOW-COLOR: #fff;
SCROLLBAR-BASE-COLOR: #fff
首先先教大家如何把最右邊的大拉軸做一個更改
相信看過前面的教學都知道
語法要放在"{ }"裡面才會生效
當然每一個區塊都會有他的框符
最右邊的大拉軸算是網頁的整體
所以現在就要自己建立一個區塊
就是
HTML { }
接下來只要把剛剛的東西放進去就ok了
所以就是
HTML {
SCROLLBAR-FACE-COLOR: #000;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #fff;
SCROLLBAR-ARROW-COLOR: #fff;
SCROLLBAR-TRACK-COLOR: #fff;
SCROLLBAR-DARKSHADOW-COLOR: #fff;
SCROLLBAR-BASE-COLOR: #fff
}
說得這麼複雜其實就是把自己設計好的卷軸放在自己打的HTML裡面
接下來只要放在CSS裡面就行了
接下來成果就是這樣
現在來教如何運用在每個區塊
現在再來放這張圖避免混亂
首先我先抓一個區塊來做教學
就先拿主要內容區吧
要更改主要內容當然是先找到主要內容與法的地方
哈哈!就是這裡!
就算你看不懂英文
好歹也看得懂中文
現在就把語法插進去
但是這是屬於區塊型的
所以要再加3行語法
就是
overflow-x: hidden;
overflow: auto;
height: 大小數字px;
所以就會變成
#content{
width:70% ;
float:right ;
background:#ccc ;
padding:10px ;
SCROLLBAR-FACE-COLOR: #000;
SCROLLBAR-HIGHLIGHT-COLOR: #fff;
SCROLLBAR-SHADOW-COLOR: #fff;
SCROLLBAR-3DLIGHT-COLOR: #fff;
SCROLLBAR-ARROW-COLOR: #fff;
SCROLLBAR-TRACK-COLOR: #fff;
SCROLLBAR-DARKSHADOW-COLOR: #fff;
SCROLLBAR-BASE-COLOR: #fff
overflow-x: hidden;
overflow: auto;
height: 大小數字px;
}
接下來只要更改你想要的高度數字大小(height)
就可以設定這個卷軸的長度範圍
如果原本就有height的話就改原本的就好了
如果沒有就是要加上去
讓他有個限制
同理寬度也一樣(width)
最後成過就是主要內容區成立單一卷軸
如果也想要更改側邊欄位區
也是一樣的方法
加入那自己用好的11條語法就ok拉~~!
成果就是這樣啦~~!
那如果要把主要內容區和側邊欄位區歸為一個卷軸
一樣找到自己想要改的區塊語法插入公式就好了
找到了!
插入公式後更新
就是以下成果
所以就是找到自己要改的區塊插入公式就好了
- Dec 10 Mon 2007 22:40
css教學(附圖)-如何更改每個區塊的卷軸設定
全站熱搜
留言列表