改變個人性別圖
#ymodprf .horos img{display:none;}
#ymodprf .horos{width:60px;height:75px;background:url(圖片網址) center no-repeat;} |
語法說明:
#ymodprf .horos img{display:none;} → 此行是先將性別圖示隱藏起來
center → 圖片置中
no-repeat → 圖片不重覆
width:60px;height:75px → 圖片寬和高
變更背景
/*Background*/
body {
background-image: url(圖片網址);
background-repeat:nrepeat ;
background-position :0% 50%;
background-attachment: fixed;} |
語法說明：
backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方
ｐｓ：當然百分比可以任意調動，不一定要上面的～
background-repeat:no-repeat :圖片如為小圖可用repeat(重覆)如為大圖可用no-repeat(不重覆)
如果不想調整想直接以圖片的大小來用的話，簡易方法可用:
/*Background*/
body{background-image:url(圖片網址);background-attachment:fixed;} |
語法說明：
" background-attachment:fixed " → 這句就是固定背景
文章背景圖
/*Main content body*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfotable, #yusrintro p{background-image:url(圖片網址);color:#文章分類的顏色}
#ymodcal .mbd td strong {color:#日曆開始的顏色;} |
左右側內容底圖
/*Nav module body*/
.yc3sec .mbd, .yc3subbd .mbd, .yc3sec .mft, .yc3subbd .mft{ background: #內容底色;background-image: url(圖片網址);color:#內容字體顏色} |
左右側欄位標題底圖
/*Nav module header*/
.yc3sec .mhd, .yc3subbd .mhd, .yc3sec .mhd a, .yc3subbd .mhd a,.yc3sec .mhd a:link, .yc3subbd .mhd a:link,.yc3sec .mhd a:visited, .yc3subbd .mhd a:visited{ background:#標題底色; color:#標題字體顏色; background-image:url(圖片網址);} |
文章標題前+小圖及文章標題的字型更改及顏色變換:
/*article content module*/
.yblogcnt .blgtitlebar {margin-bottom:10px;zoom:1;}
.yblogcnt .blgtitlebar h2 {font-size:150%;font-weight:bold;background:url(圖片網址) no-repeat;padding-left:32px;font-family:華康娃娃體}
.yblogcnt .blgtitlebar h2 a {color:#000000; padding-right:5px;} |
語法說明：
font-size:150% → 字型的大小，數字越大字越大。
32px → 圖片與字體的差距。
font-family:華康娃娃體 → 字體可直接打字進去更換電腦裡有的即可。
color:#000000 → 請使用色碼表去更換色調。
左右欄位標題前小圖
/*Nav module list*/
.ycntmod .mbd ul.list li {background:url(第一個圖片網址) left .1em no-repeat;padding-left:25px;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;} |
語法說明：
1em → 圖片下移數值，數字越大下移越多
25px → 文章標題前面圖檔和右邊文字相差距離，數字越大，兩者之間距離越遠
3px;_margin-bottom:3px;_line-height:1.5em → 行距高度倍數，數字越大，高度倍數越高
第一個url是文章標題前面圖檔
第二個url是所有文章和更多回應圖檔
更新日期欄的標題小圖
/*Module latest upup*/
#ymodupdate .mbd .date{background:url(圖片網址) left center no-repeat;padding-left:11px;font-size:104%;font-family:verdana;} |
語法說明：
11px → 圖案與字的差距。
