哈哈!終於出第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拉~~!



成果就是這樣啦~~!

那如果要把主要內容區和側邊欄位區歸為一個卷軸

一樣找到自己想要改的區塊語法插入公式就好了



找到了!

插入公式後更新

就是以下成果



所以就是找到自己要改的區塊插入公式就好了

arrow
arrow
    全站熱搜

    never12606 發表在 痞客邦 留言(1) 人氣()