將自定欄位 "純文字超連結" 樣式表置入自訂樣式中

2009030113:31

將自定欄位純文字超連結樣式表置入自訂樣式中

純文字超連結範例:

(2008/08/05修正,原因:教學語法少貼捲軸 id)

可連續串接 46個文字超連結,覺的太長是嗎?給它加個滑軌


PS:引用時請勿刻意改變文章格式,直接由引導複製箭頭反白下拉至
文章頁底複製貼入文章編輯,不要預覽,不用切換至HTML,直接按發
表,以免產生格式上的錯誤,在此叮嚀!自訂樣式與自訂欄位不同,語
法應用時不要貼錯地方

有格友問?如何改變字體大小,只要在以下語法段中加入字體尺寸語法,改變字型,加入字型語法

語法範例:

#fi2 a{color:#FFFF00;font-size:14px;font-family:標楷體;}
#fi3 a{color:#00FFFF;font-size:14px;font-family:標楷體;}

顯示範例:(2008/08/12新增)

將自定欄位連結框樣式表置入自訂樣式中-增加有限的字元寫入,五個欄位同時使用,可共同宣告相同超連結框模式規則,  (二度空間)語法應用編輯
將以下樣式表複製加入自訂樣式最底層(樣式參考)
#fi1{
text-align:left;WIDTH:130px;HEIGHT:180px;
OVERFLOW: auto;
SCROLLBAR-FACE-COLOR: #CCCCCC;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #CCCCCC;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #CCCCCC;
SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;}
#fi2 a{color:#FFFF00;}
#fi3 a{color:#00FFFF;}
應用語法解說
#fi1{
text-align:left;/*文字靠左*/WIDTH:130px;/*滑軌寬度*/HEIGHT:180px;/*滑軌高度*/
OVERFLOW: auto;/*內容超出區塊自動由瀏覽器決定*/
/*以下滑軌各部顏色(滑軌語法部分避免使用小寫,可能受到 html 中的滑軌語法影響*/
SCROLLBAR-FACE-COLOR: #CCCCCC;
SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF;
SCROLLBAR-SHADOW-COLOR: #FFFFFF;
SCROLLBAR-3DLIGHT-COLOR: #CCCCCC;
SCROLLBAR-ARROW-COLOR: #FFFFFF;
SCROLLBAR-TRACK-COLOR: #CCCCCC;
SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC;}
#fi2 a{color:#FFFF00;/*上超連結標題字體顏色*/}
#fi3 a{color:#00FFFF;/*下超連結標題字體顏色*/}

貼語法路徑管理部落格面板設定自訂樣式→加入語法→確定

自訂樣式檢圖說明範例→ http://xs320.xs.to/xs320/07421/W6-4.jpg

如果滑軌自動由部落格自訂樣式CSS決定,則在此 SCROLLBAR 部分的字串不須寫入,只留下↓如:

#fi1{text-align:left;WIDTH:130px;HEIGHT:180px; OVERFLOW: auto;}
#fi2 a{color:#FFFF00;}
#fi3 a{color:#00FFFF;}

將以下連結 id 複製加入自訂欄位中,可連續串接,每組為上下兩個不同文字顏色連結,可串接至少46個超連結
<div id="fi1">
<div id="fi2"><a href="超連結網址">連結標題</a></div>
<div id="fi3"><a href="超連結網址">連結標題</a></div>
</div>
重點說明
<div id="fi1">/*捲軸 id*/<div id="fi2">/*上超連結 id*/<div id="fi3">/*下超連結 id*/

46個連結中,無論串接幾個,需要在最前框與最後框加入 <center><串接 id></center> 以便將文字欄位置中。

PS:串接時,只要再串接<div id="fi2">~<div id="fi3">,然後改變其中連結網址即可

應用如下:

<center>
<div id="fi1">
<div id="fi2"><a href="超連結網址">連結標題</a></div>
<div id="fi3"><a href="超連結網址">連結標題</a></div>
/*-------------------------以下連續串接-------------------------*/
</div>
</center>

貼語法路徑管理部落格管理自定欄位→填寫自定欄位名稱→將語法貼入自定欄位內容→按儲存

PS :重新修改時,語法建議重貼

自訂欄位檢圖說明範例→http://xs320.xs.to/xs320/07442/W6-5.jpg

另開視窗開啟
在超連結語法中加入 target="_blank" 以新視窗開啟

例如:<a target="_blank" href="超連結網址">連結標題</a></div>

英文色碼表                數字色碼表

滑軌色碼位置解說:

SCROLLBAR-FACE-COLOR: #CCCCCC
移動棒的顏色

SCROLLBAR-HIGHLIGHT-COLOR: #FFFFFF
按鈕邊框內層左邊與上面的顏色

SCROLLBAR-SHADOW-COLOR: #FFFFFF
按鈕邊框內層右邊與下面的顏色

SCROLLBAR-3DLIGHT-COLOR: #CCCCCC
按鈕邊框外層左邊與上面的顏色

SCROLLBAR-ARROW-COLOR: #FFFFFF
按鈕箭頭的顏色

SCROLLBAR-TRACK-COLOR: #CCCCCC
底部軌道顏色

SCROLLBAR-DARKSHADOW-COLOR: #CCCCCC
按鈕邊框外層右邊與下面的顏色

祝您使用愉快