將自定欄位連結框樣式表置入自訂樣式中(進階版)
超連結框範例 ：(適用欄位加寬)
(2008/08/05修正，原因：教學語法少貼原始檔文字)
可連續串接 46個超連結框，覺的太長是嗎?給它加個捲軸(滑軌)
PS：引用時請勿刻意改變文章格式，直接由引導複製箭頭反白下拉至
文章頁底複製貼入文章編輯，不要預覽，不用切換至HTML，直接按發
表，以免產生格式上的錯誤，在此叮嚀！自訂樣式與自訂欄位不同，語
法應用時不要貼錯地方
|
|
|
|
| #fi1{border:4px double #FFFFFF;WIDTH:126px;background:url(http://img181.imageshack.us/img181/8651/30750664dm3.gif);padding:3px} #fi2, #fi3{border:4px double #FFFFFF;WIDTH:114px;margin-top:6px;margin-bottom:3px;background:#5511BD;padding-top:2px;} #fi4{OVERFLOW:auto;HEIGHT:180px;scrollbar-face-color:#0000FF;scrollbar-highlight-color:#cccccc;scrollbar-darkshadow-color:#cccccc;} #fi2 a{color:#FFFF00;} #fi3 a{color:#00FFFF;} |
|
|
| #fi1{border:4px double #FFFFFF/*主外框線樣式*/;background:url(http://img181.imageshack.us/img181/8651/30750664dm3.gif)/*主外框線底圖網址*/;padding:3px/*主外框線底圖顯示墊充程度*/;} #fi2, #fi3{border:4px double #FFFFFF/*超連結框線樣式*/;margin-top:6px/*與主外框靠上邊界距離*/;margin-bottom:3px/*與主外框靠下邊界距離*/;background:#5511BD/*超連結標題背景底色*/;padding-top:2px/*超連結標題與內框線上邊線的距離;} #fi4{OVERFLOW:auto;HEIGHT:180px;scrollbar-face-color:#0000FF;scrollbar-highlight-color:#cccccc;scrollbar-darkshadow-color:#cccccc;}/*內容超出區塊自動由瀏覽器決定-滑軌高度-滑軌各部顏色*/ #fi2 a{color:#FFFF00/*上框超連結標題字體顏色*/;} #fi3 a{color:#00FFFF/*下框超連結標題字體顏色*/;} |
| 如果滑軌自動由部落格自訂樣式CSS決定，則在此 SCROLLBAR 部分的字串不須寫入，只留下↓如：
#fi1{border:4px double #FFFFFF;WIDTH:126px;background:url(http://img181.imageshack.us/img181/8651/30750664dm3.gif);padding:3px} |
|
|
| <div id="fi1"><div id="fi4"> <div id="fi2"><a href="超連結網址">連結標題</a></div> <div id="fi3"><a href="超連結網址">連結標題</a></div> </div></div> |
|
|
| <div id="fi1">/*主外框線 id*/<div id="fi4">/*滑軌 id*/<div id="fi2">/*上超連結 id*/<div id="fi3">/*下超連結 id*/
46個連結框，無論串接幾個，需要在最前框與最後框加入 <center><div id="fi1"><div id="fi4"><串接 id></div></div></center> 以便將文字置中。 PS：串接時，只要再串接<div id="fi2">～<div id="fi3">，然後改變其中連結網址即可 應用如下： <center><div id="fi1"><div id="fi4"> |
|
|
| 在超連結語法中加入 target="_blank" 以新視窗開啟
例如：<a target="_blank" href="超連結網址">連結標題</a></div> |
框線條樣式 : ( 無、 點線、 實線、 雙線、 溝線、 脊線、 嵌入線、浮出線 )
相對應語法 : none︱ dotted｜solid︱ double︱ groove︱ ridge︱ inset︱ outset
貼語法路徑→管理部落格→管理自定欄位→填寫自定欄位名稱→將語法貼入自定欄位內容→按儲存
PS :重新修改時，語法建議重貼
自訂欄位檢圖說明範例→http://xs320.xs.to/xs320/07442/W6-5.jpg
祝您使用愉快
