連結標題底圖變化
此語法在參觀 阿泰104 發現
314手癢 查看 阿泰104 的原始碼，
拆解下來重新改寫語法測試做教學
讓語法去除連結底線
314已將阿泰104 收入部落格教學達人族群
建議大家參觀 阿泰104 部落格
阿泰104 相當用心整理製做許多教學
底圖 注意：
不可使用自己電腦內 或 部落格相簿圖片
↑會無法呈現
請使用放置在個人空間的網路圖片
可採用網路上背景圖
使用閃底圖 效果不錯
314提供閃底素材 請自行放至個人網路空間
背景底圖資訊：
晚上 假日 流量大不易下載
下載→亮彩底紋.exe
314天空相簿 閃底 素材
改變CSS語法之前，強烈建議請先複製在 Word 備份
置換語法步驟：
登入 奇摩 - 進入 管理部落格 - 選 面板設定 - 選 自訂樣式
請選擇你要的 連結語法 貼在CSS中
CSS語法中 不能同時並存相同語法
連結標題底圖變化語法：
/*Links連結底圖無底線*/
a,a:link,a:visited{color:#0033FF;text-decoration: none;}
a:hover{color:#eeeeee;text-decoration: none;background-image:url(http://網路圖片.gif)}
語法說明：
a,a:link,a:visited{color:#0033FF ←字體顏色
ext-decoration: none ← 去除底線
a:hover{color:#eeeeee ←滑鼠停在連結時 文字顏色
點選→色碼表查詢←顏色編號
連結底圖有底線 語法：
/*Links連結底圖有底線*/
a,a:link,a:visited{color:#0033FF;text-decoration: none;}
a:hover{color:#eeeeee;text-decoration: underline;background-image:url(http://圖片網址.gif)}
語法說明：
a,a:link,a:visited{color:#0033FF ←字體顏色
ext-decoration: none ← 去除底線
a:hover{color:#eeeeee ←滑鼠停在連結時 文字顏色
text-decoration: underline ←連結時有底線
點選→色碼表查詢←顏色編號
去除連結底線 語法：
/*Links文章去除連結底線*/
a,a:link,a:visited{color:#904E0E;text-decoration: none}
a:hover{color:#F4AB25;background-color: #FFECD9;text-decoration: none;}
語法說明：
color:#660000 ←改顏色
點選→色碼表查詢←顏色編號
none ←加這句 去除連結底線
a,a:link,a:visited{color:#904E0E ←超連結字體顏色 →314
a:hover{color:#F4AB25 ←滑鼠停在超連結中文字的顏色→314
background-color: #FFECD9 ←滑鼠停留在超連結中文字的底色→314
延伸說明(引用《甜蜜♥Lover》所做的整理表格：
參考下列表格 可以依照自己需求編寫CSS語法
《甜蜜♥Lover》千金公主寶貝窩
http://tw.myblog.yahoo.com/jw!844BCHmZBxjs7onFX0_pm7Bp/article?mid=1441
＊網頁超連結
語法說明：
| /*主題*/ | 內容標題 | {常用修改樣式} |
| /*Links網頁超連結*/ | a,a:link,a:visited (原始超連結文字) | color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) background-color:#FFFFFF(文字背景顏色) position:relative;top:2px;left:2px(文字位移數值) text-decoration:none(刪除底線) |
| a:hover (滑鼠經過時變化) | color:#FFFFFF(字體顏色) font-family:新細明體(文字字型) font-size:9px(文字尺寸) font-weight:bold(文字粗體) background-color:#FFFFFF(文字背景顏色) background-image:url(http://圖檔網址.gif)(文字背景圖檔) border:1px dotted #FFFFFF(文字點狀框線) position:relative;top:2px;left:2px(文字位移數值) text-decoration:none(刪除底線) |
範例：
/*Links網頁超連結*/
a,a:link,a:visited{color:#6600CC;text-decoration:none}
a:hover{color:#FFFF00;background- image:url(http://圖檔網址.gif);background-repeat:repeat;border:1px dotted #6600CC;position:relative;top:1px;left:1px}
詢問前 請善用 站內搜尋 或查看314精華區
留言列表
