感謝小小羊兒的分享
圖檔不宜選擇過長寬過大的,容易影響整體效果,
左右欄位標題小圖
範例:
↓下面的CSS語法是目前部落格所使用的
/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(文章標題前面圖檔位址) left .1em(圖片下移數值,數字越大下移越多) no-repeat;padding-left:17px(文章標題前面圖檔和右邊文字相差距離,數字越大,兩者之間距離越遠);margin-bottom:3px;_margin-bottom:3px;_line-height:1.5em(行距高度倍數,數字越大,高度倍數越高);}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(所有文章和更多回應圖檔位址) 48px center no-repeat;}
將灰色的部份,貼上連結圖檔的網址,前後括號"()"也是語法之ㄧ喔,別刪除喔!
語法範例:/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(http://XXXXX.gif) left .1em no-repeat;padding-left:17px;margin-bottom:3px;_margin-bottom:3px;_line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(http://XXXXX.gif) 48px center no-repeat;}
當然除了上面特別標出來的數字,還有其他數字值可以調整,
可以依照選用的圖檔自行去修改!
更新日期標題小圖
範例:
↓下面的CSS語法是目前部落格所使用的
/*Module latest upup*/
#ymodupdate .mbd .date{background:url(圖檔位址) left center no-repeat;padding-left:11px(圖檔和右邊文字相差距離,數字越大,兩者之間距離越遠);font-size:104%;font-family:verdana;}
將灰色的部份,貼上連結圖檔的網址,前後括號"()"也是語法之ㄧ喔,別刪除喔!
語法範例:
圖檔不宜選擇過長寬過大的,容易影響整體效果,/*Module latest upup*/
#ymodupdate .mbd .date{background:url(http://XXXXX.gif) left center no-repeat;padding-left:11px(圖檔和右邊文字相差距離,數字越大,兩者之間距離越遠);font-size:104%;font-family:verdana;}
當然除了上面特別標出來的數字,還有其他數字值可以調整,
可以依照選用的圖檔自行去修改!
標題前圖示(任何適當大小圖檔都可以)
範例:
↓下面的CSS的語法,是部落格目前使用的
/*Article content module*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:120%;font-weight:bold;background:url(圖示網址) no-repeat;padding-left:32px;}
將灰色的部份,貼上連結圖檔的網址,前後括號"()"也是語法之ㄧ喔,別刪除喔!
語法範例:
修改紅色部分 就可以了 數字越大 可以顯示的圖也越大/*Article content module*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:120%;font-weight:bold;background:url(http://xxxxx.gif) no-repeat;padding-left:32px;}
不過 後面的字也會跟著放大(會變的醜醜的)
建議是大小差不多像這個部落格的@@
補充說明: 綠色字體那邊數字大小 代表圖示和字體的間距 數字越大間距越大
>說明 (圖)__間距__ (標題)
注意:圖示一定要用網路空間的喔!
自己電腦中或是部落格的都不行喔!
注意:上面有些語法,在自訂模式中CSS與法已經有存在了~
使用的時候,請先察看該與法是否存在~
若是存在,代表該效果的語法只是修改部分,
此時,修改那些部分即可!
(重覆貼取語法,可能會造成效果無法顯示,或是其他無法預期的事情)
而該語法不存在(即原本CSS語法中沒有),
請將整個語法直接貼上使用!
補充:修改CSS的時候,請先將CSS備份!
○注意○
請體恤原創教學者的心血,別忘記"引用是一種尊重"
○關於本篇教學相關○
語法是共享的,只是在使用之前能做到一點
"引用是一種尊重"
"註明是一種尊重"
留言列表