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

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裡面找到下列語法，更改一下底色及透明度％就ＯＫ了。

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

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

語法範例：

/*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); 　　←透明度％

　　←阿盛網站裡面也有許多的動畫素材喔。