如何在左右欄內最新文章、最新回應、文章分類之標題前加入小圖示

2006091507:13

部落格裡有很多css教學文章...我以為大家或許都已經會使用了

但是仍然有很多人問我..所以我轉貼相關文字讓大家參考....

 

如何左右欄內最新文章、最新回應、文章分類之標題前加入小圖示

作法:直接複製下列語法,貼在CSS最底端就可以了。

--------------------------------------------------------------

語法範例:

 

/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(http://homelf.kimo.com.tw/zz14723/s-gif/G002.GIF) left .6em no-repeat;padding-left:20px;margin-bottom:3px;_margin-bottom:3px;_line-height:1.8em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(http://homelf.kimo.com.tw/zz14723/s-gif/sd03.gif) 15px center no-repeat;}

 

--------------------------------------------------------------

語法說明:

.ycntmod .mbd ul.list li {background:url(http://homelf.kimo.com.tw/zz14723/s-gif/G002.GIF) left .6em no-repeat;padding-left:20px;margin-bottom:3px;_margin-bottom:3px;_line-height:2em;}

↑此行是指在左右欄內的文章標題前上小圖。

background:url(http://homelf.kimo.com.tw/zz14723/s-gif/G002.GIF)  ←將原本的小黑點換成圖片。(※ 圖片大小最好在13*13內。jpg或gif圖檔皆可。)

padding-left:20px;  ←小圖與標題間的距離

_line-height:1.8em; 設定行高 ,也可以是14pt、或是1.5行高等等設定。

(※ 小圖位置的高低度調整,調整後也會影響行與行之間的距離)

--------------------------------------------------------------

.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(http://homelf.kimo.com.tw/zz14723/s-gif/sd03.gif) 15px center no-repeat;}

↑此行是指在文章標題最下面的所有文章及所有回應前加小圖。

margin:-3px 0 0 -3px; 紅字-3px,負時拉緊行距,正時10px,可拉開行距。

            藍字-3px,負時圖片往左移,正時圖片往右移。

text-align:right; ←文字置右

15px  ←增加數字 ,也可拉近小圖與文字間的距離。

 


更新日期前圖

作法:直接複製下列語法,貼在CSS最底端就可以了。

--------------------------------------------------------------

語法範例:

 

/*Module latest upup*/
#ymodupdate .mbd .date{background:url(http://homelf.kimo.com.tw/zz14723/s-gif/6-27.GIF) right left no-repeat;font-size:120%;font-family:Art;}

 

-------------------------------------------------------------- 

語法說明:

right left no-repeat; ←日期右,小圖左,圖片不重覆。

padding-left:10px; ←小圖與文字間距。(加進去不好調整,所以刪了也無妨。)

font-size:120%; ←文字大小n個Pixels或n% (百分比越大,文字越大。)

font-family:Art; ←英文字字型(因為是數字,所以就套上英文字型。)

※為配合小圖大小,文字百分比就調大一點了。(我的小圖大小是17*17)。

※ 動畫圖片修改大小,可以用 Ulead GIF Animator 5(動畫軟體)。

 


 部落格置頂區塊,設定透明度,改變區塊底色、加入底圖

作法:到CSS裡面找到下列語法,更改一下底色及透明度%就OK了。

--------------------------------------------------------------

●更改置頂區塊色透明度及更換區塊底色。

語法範例:

 

/*Master header*/
#yhtw_masthead{color:#CFDAE5; background:#F6DEF0(opacity=50); opacity:0.50; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{font-size:120%;color:#686EB8;}

 

--------------------------------------------------------------

法說明:

background:#F6DEF0; 底色色碼

opacity=50 透明度設定


更改置頂的區塊底色為背景圖。

作法:到CSS裡面找到下列語法,要對照修改或直接複製語法覆蓋在上面都可以。

--------------------------------------------------------------

語法範例:

 

/*Master header*/
#yhtw_masthead{background-image: url(http://www.wish1234.f4w.net/bg/bgother43.gif);color:#0066ff;filter:alpha(opacity=30); opacity:0.30; moz-opacity:0.5;}
#yhtw_masthead a,#yhtw_masthead a:link,#yhtw_masthead a:visited,#yhtw_masthead a:hover{color:#000080;}

 

--------------------------------------------------------------

法說明:

background-image:url(圖片網址); 背景圖片

filter:alpha(opacity=30);   透明度%


歡迎光臨阿盛網站~   ←阿盛網站裡面也有許多的動畫素材喔。

小小素材圖庫:引用自   314 的部落格。

佩慈&彤彤的媽咪   ╭☆反轉〃宏★╮  感恩各位大大們無私的分享。

 

找下面這些小動畫的網址:

選好圖按滑鼠右鍵,會出現一個小視窗,最下面的內容進去,又出現一個視窗,在中間有個網址,那就是您所選動畫的網址了。


               

                  

                            .