就如果大家也想做個像浮動的標籤，滑鼠過去才會彈出來的區塊

可以直接到 CSS大神-WEI的部落格學習語法!

起初我搞了好久，一直找不到問題，然後我把連結做在圖片上，然後再放到這個浮動標籤上

試了好久!!!!!!!!  才終於成功....

 

如果只是一般的浮動標籤方式，直接參考CSS大神的做法教學即可

如果想要把單純的 "超連結" 變成 "帶有超連結的圖片"

原本是寫「超連結名稱」的地方(原本的語法裡面的名稱大神寫的是 "DRIBS & DRABS")

改成 <img alt="圖片標題" height="圖片高度(如果有需要定義圖片高度時使用，沒有的話height這個屬性定義可以刪掉)" src="圖片網址" >即可

 

她的設計版面都超級好看的，如果喜歡的話可以到這裡挑選她的免費樣式套用~

 

 

 

 

 

此篇文章的學習參考來自 WEI / DRIBS & DRABS - HTML+CSS 加入浮動式自訂連結區塊

 

 

梅花的語法筆記

​檢視CSS標籤F12 ​文章區塊 #content
＊開發人員工具＊ ＊改文章標題字體、背景＊
​部落格整體 #body ＊改行距、邊界＊ ⛔
＊換背景底圖＊ 公告版面 #spotlight
＊換字體＊ ＊公告版面應用＊
＊換部落格ICON＊ 實用推薦
＊設計LOGO＊  ＊讓部落格可以被Google＊
​封面橫幅#banner/#header ＊Google Analytics分析＊
＊換封面底圖＊ 其他應用
＊部落格標題敘述大小位置＊ ＊0074.gif梅花的語法筆記本0074.gif＊
側欄區塊 #links ＊文章內的目錄(錨點)image＊
＊改側欄標題的背景＊ ＊關閉遮蓋版面的廣告＊
＊Facebook粉專外掛image＊ ＊隱藏上方藍色選單＊
＊音樂外掛image＊ ＊連結Google相簿＊
＊YouTube外掛image＊ ＊圖片瘦身不失真＊
＊分享連結階層＊  
   

 

 

arrow
arrow
    文章標籤
    CSS學習 CSS 梅花的CSS學習 語法 CSS語法 樣式 CSS側欄 側欄CSS 浮動標籤
    全站熱搜

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

    E-mail轉寄