在左右欄內最新文章、最新回應、文章分類之標題前加入小圖示
作法:直接複製下列語法,貼在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 的部落格。
佩慈&彤彤的媽咪 ╭☆反轉〃宏★╮ 感恩各位大大們無私的分享。
找下面這些小動畫的網址:
選好圖按滑鼠右鍵,會出現一個小視窗,最下面的內容進去,又出現一個視窗,在中間有個網址,那就是您所選動畫的網址了。
.
留言列表