自定欄位文章超連結CSS簡易框-1

2009081920:16

 

自定欄位文章超連結CSS簡易框(二度空間)語法應用編輯

這個語法比較不佔字元,在自訂欄位有限的字元數量可有效的多出幾個連結框

網址應用盡量使用短字元,盡量避免過長的檔名,因為會影響字元數量

通常奇摩部落格文章網址都會多出一些字串,這些字串是可以刪除的,例如:

http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=19300&prev=7489&next=19261&l=a&fid=10

紅色部分去除,不管任何字串,縮寫為↓

http://tw.myblog.yahoo.com/jw!.KNty8iGR0WBlosOtiUpDA--/article?mid=19300

此語法另一個優點是:使用火狐瀏覽器時,影響程度比較不明顯

PS:引用時請勿刻意改變文章格式,以免產生應用上的錯誤


請勿使用此五框範例做修改,以免增加字元


框框串聯語法範例
<center style="WIDTH:140px;BACKGROUND:#FF9900;font-family:標楷體;font-size:18px;">
<div style="border:3px ridge;PADDING:7px;BACKGROUND:url('背景小圖網址');">
<div style="border:3px ridge;BACKGROUND:#FF0000;">
<a href="超連結文章網址" title="淡出提示文字">
<font color="#FFFFFF">第一框連結</font></a></div></div>
/*---------------------------------------第一框結束------------------------------*/
<div style="border:3px ridge;PADDING:7px;BACKGROUND:url('背景小圖網址');">
<div style="border:3px ridge;BACKGROUND:#FF0000;">
<a target="_blank" href="超連結文章網址" title="淡出提示文字">
<font color="#FFFFFF">第二框連結</font></a></div></div>
/*---------------------------------------第二框結束------------------------------*/
</center>
PS:<center></center> 置中語法只加在第一框和最後一個框即可
語法應用時 /*文字*/ ←文字註解不用加入(在此加入是為了教學方便語法檢視)

為了節省字元,文字大小及字型也可由"自訂樣式"CSS中設置 ,此框框語法中的font-family:標楷體;font-size:18px; 即可省略

如果要使用框線顏色,可在border:2px ridge 語法後空一格加入#XXXXXX←色碼,例如:border:3px ridge #FF0000;


一般視窗開啟(語法使用解釋)
<center style="WIDTH:140px;BACKGROUND:#FF9900;font-family:標楷體;font-size:18px;">/*欄框文 字置中起始-預設欄框寬度(不使用可以省略)-欄框底色(不使用可以省略)-字體-字體大小*/
<div style="border:3px ridge;/*外框線粗細及樣式*/PADDING:7px;/*框框圖片顯示框距*/BACKGROUND:url('背景小圖網址');">
<div style="border:3px ridge;/*內框線粗細及樣式*/BACKGROUND:#FF0000;"/*文字背景色>
<a href="超連結文章網址" title="淡出提示文字">
<font color="#FFFFFF"/*文字顏色*/>第一框連結</font></a></div></div>
另開視窗開啟(以下↓語法用語解釋 請參考↑)
<div style="border:3px ridge;PADDING:7px;BACKGROUND:url('背景小圖網址');">
<div style="border:3px ridge;BACKGROUND:#FF0000;">
<a target="_blank" href="超連結文章網址" title="淡出提示文字">
<font color="#FFFFFF">第二框連結</font></a></div></div>
</center>/*欄框文 字置中結語*/
另開視窗開啟:在連結項中加入  target="_blank" 語法
英文色碼表                數字色碼表
    框線條樣式 : ( 無、 點線、 實線、 雙線、 溝線、 脊線、 嵌入線、浮出線 )
相對應語法 : none︱ dotted|solid︱ double︱ groove︱ ridge︱ inset︱ outset

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

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

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

繼續瀏覽下一頁進階版

祝您使用愉快