網頁

2015年1月3日

|

Blogspot 工整的標籤 (Labels)

Views:
你的 Label widget 是不是設定為"雲"模式呢 ?
原版本的, 帶有不少問題.

如我的那個...
"Butterfly S" 之間太寬,
"Galaxy Tab Galaxy Tab 7.7 ME865" 一段段, 不明顯的單個標籤,
"搞搞魚缸" 被強行分行.



其實可以用簡單的用 CSS 格式化, 便有不錯的效果.
[設計]> [範本]> [自訂]> [進階]> [新增 CSS]>


其實只是用 float & line-height 已經解決了"分行"的問題, 但是排版並不好看.
所以加入 border, padding, margin 為間隔進行修飾.
用上了 CSS, 那麼設定了 text-decoration:none , 把超連結時的下劃線去掉.
再用 hover 方法把超連結模式時轉換背景顏色.
.Label a{
background:none;
border:#4F4F4F 1px dashed;
padding: 0px 5px 0px 5px;
margin:1px 1px 1px 1px;
line-height:26px;
float:left;
text-decoration:none;
}

.Label a:hover{
background:#1c1c1c;
}

May-2015 更新, 現時這 Blog 所用的 CSS 代碼如下... (支援"顯示每個標籤的文章數目")
.Label a{
background: none; 
padding: 2px 5px 2px 5px; 
display: inline-block; 
text-decoration: none; 
*display: inline; 
*zoom: 1; 
}

.Label a:hover {
color: #ffffff; 
background: #dd7700; 
}

沒有留言:

發佈留言

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃