感謝小小羊兒的分享



左右欄位標題小圖
 範例:
 ↓下面的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備份!

○注意
請體恤原創教學者的心血,別忘記"
引用是一種尊重"


 ○關於本篇教學相關
語法是共享的,只是在使用之前能做到一點
"引用是一種尊重"
"註明是一種尊重"


全站熱搜

鳳梨頭 發表在 痞客邦 留言(3) 人氣()