close

 



左右自訂欄位要在CSS自訂式樣中設上捲軸設定有兩種方式


(但要在自訂欄位加捲軸建議使用面板欄位加框設定)


面板欄位加寬方法請參考 →



●第一種方法


1.先到版型設定處將(自訂欄位)欄位名稱全部移到左邊其他預設欄位都設在右邊


2.將下方語法貼到CSS自訂式樣表最底處


語法範例如下



/*自訂欄位加捲軸語法*/
.yc3sec .mbd.ul.list{OVERFLOW:auto;HEIGHT:350px;scrollbar-face-color:#333333;
scrollbar-track-color:#333333;
scrollbar-arrow-color:#ff0000;
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#333333;
scrollbar-shadow-color:#333333;
scrollbar-darkshadow-color:#000000;}

語法解說:


OVERFLOW:auto; →內容超出區塊自動由瀏覽器決定


HEIGHT:350px;  →滑軌高度


滑軌各部顏色↓


scrollbar-face-color:#333333;
scrollbar-track-color:#333333;
scrollbar-arrow-color:#ff0000;
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#333333;
scrollbar-shadow-color:#333333;
scrollbar-darkshadow-color:#000000;


捲軸語法部位說明
SCROLLBAR-FACE-COLOR: 色碼; /*設定軸面顏色*/

SCROLLBAR-HIGHLIGHT-COLOR:色碼; /*設定軸面三角左邊顏色*/

SCROLLBAR-SHADOW-COLOR: 色碼; /*設定軸面三角右邊顏色*/

SCROLLBAR-3DLIGHT-COLOR: 色碼; /*設定左立體邊顏色*/

SCROLLBAR-DARKSHADOW-COLOR: 色碼; /*設定右立體面顏色*/

SCROLLBAR-ARROW-COLOR: 色碼; /*設定箭頭的顏色*/

SCROLLBAR-TRACK-COLOR: 色碼; /*設定軸軌的顏色*/



卷軸OVERFLOW 設定:

OVERFLOW 設定捲軸出現的設定值,以下列出較常用的語法

OVERFLOW : Hidden;   不出現捲軸

OVERFLOW : Auto;  瀏覽器判斷區塊是否超過設定的寬高,而出現捲軸

OVERFLOW : Scroll;  強迫出現捲軸,無論是否超過預設的寬高


Hidden及Scroll也可以各別設定直捲軸Y 或 橫捲軸X

OVERFLOW-x : Hidden; 定義X 水平捲軸隱藏不出現

OVERFLOW-y : Hidden; 定義Y 垂直捲軸隱藏不出現

OVERFLOW-x : Scroll;  強迫X 水平捲軸出現


卷軸名稱部位對照表



語法放置自訂式樣請參考圖解:→


●第二種方法:


此方法一樣建議使用在版面攔位加寬後


這方法可以任意將想要加捲軸的或是不加捲軸的自己設定~


這方式不限自訂欄位是方左側或是右側一樣都可以任意加上


1. 將下方語法貼在CSS自訂式樣表中



#fi4{OVERFLOW:auto;HEIGHT:250px;scrollbar-face-color:#0000FF;scrollbar-highlight-color:#cccccc;scrollbar-darkshadow-color:#cccccc;}
 

語法中 fi4區塊名稱標籤


語法中捲軸顏色及其他設定與上方註解一樣


2. 在每一個要加捲軸的自訂欄位加內容時須在內容開頭處打上


加上<div id="fi4"> 在最後再加上</div>



如下範例↓


<div id="fi4"> 這裡再貼欄位中文字或是語法</div>


自訂欄位貼貼語法請參考圖解:→







 

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 oreokimo 的頭像
    oreokimo

    培迪 的痞客邦部落格

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