(語法教學) 部落格語法教學大解說 {很詳細的喔}
定義左右欄頂欄：
| /* 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:#808000; color:#00FF00; text-align:center; } |
語法說明： （標題框大小=150*30）
| .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:#808000; background-image: url(圖址); |
底色、底圖（背景圖）。二者可併存。 |
| filter:alpha(opacity:50); | 底色度明度。留言板、相簿、月曆…等內設標題字底色無法控制透明度 |
| color: | 字色。 |
| text-align:center; | 字置中 |
| font-family:標楷體; font-size:17px; | 只有留言板、相簿、月曆…等標題字變更 大小對左右欄標題字都能牽動 |
語法範例：
| /* 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:#808000; filter:alpha(opacity:50); color:#00FF00; text-align:center;} |
定義左右欄內容區：
| /* Nav module body 左右欄內容區＜可控制的 模組 主體＞*/ .yc3sec .mbd、.yc3subbd .mbd、.yc3sec .mft、.yc3subbd .mft{ background:#E6EBD5; color:#008080; } |
語法說明：
| .yc3sec .mbd、.yc3subbd .mbd、.yc3sec .mft、.yc3subbd .mft{……} | |
| background:#E6EBD5; background-image: url(圖址); |
底色、底圖（背景圖）。二者可併存。 |
| zoom:1; filter:alpha(opacity:50); | 透明度 |
| color:#D2D1E1 | 字色。指非連結字串的內容文字。 文章分類、最新文章…等連結字串由 /*Links 定義連結字串*/ 控制。 |
語法範例：
| /* Nav module body 左右欄內容區 */ .yc3sec .mbd、.yc3subbd .mbd、.yc3sec .mft、.yc3subbd .mft{ background:#D2D1E1; zoom:1; filter:alpha(opacity:50); color:#000080; } |
連結字串前加圖示
| /* Nav module list 連結字串前加圖示＜可控制的模組 目錄＞*/ .ycntmod .mbd ul.list li {background:url(圖示位址) no-repeat left 0.1em; padding-left:20px; margin-bottom:7px; line-height:1.5em;} .ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px; text-align:right; background:url(所有文章和更多回應圖檔位址) 50px center no-repeat;} |
說明：
| .ycntmod .mbd ul.list li {……} | 在左右欄標題目錄串連字前加圖示 |
| background:url(圖址) no-repeat left 0.1em |
這個應不用再介紹了 當然不重複貼圖，否則會貼滿整欄框 應該是指圖與左邊距離，結果字卻下沈。不用設它。 （em 約為M一鉛字所佔之面積，為印刷字體之計量單位） |
| padding-left:20px; | 文字與左邊緣的距離，當然要比圖示寬些嘍～＜補白-左：＞ |
| margin-bottom:7px; | 行距（與下一段落的距離）＜邊、頁邊的空白-底部：＞ |
| line-height:1.5em | 列高（可以不用設） |
| .ycntmod .mbd ul.list li.more {……} | 在所有文章、更多回應前加圖示＜more=另外的、附加的＞ |
| background:url(圖址) 50px no-repeat |
這個應不用再介紹了 調整與邊緣距離（內設是靠左上）（也可用文字來控制 center=置中） 不重複貼圖 |
| margin:-3px 0 0 -3px; | 與各邊緣距。不用設它。＜margin=邊、頁邊的空白＞ |
| text-align:right; | 不用設它。＜text-align:right=文字-排成一行：右＞ |
語法範例：
| /* Nav module list 連結字串前加圖示 */ .ycntmod .mbd ul.list li {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA04.gif) no-repeat; padding-left:18px; margin-bottom:7px; } .ycntmod .mbd ul.list li.more {background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgBeingA02.gif) 50px no-repeat; } |
變更個人性別圖：
| /* 改變個人性別圖 */ #ymodprf .horos img{display:none;} #ymodprf .horos{width:60px; height:75px; background:url(圖檔位址) center no-repeat; } |
語法說明：
| #ymodprf .horos img{……} | 定義原性別圖示（將原性別圖示隱藏，否則會重疊貼圖） |
| display:none; | ＜display:none=展開、顯示：並不＞ |
| #ymodprf .horos{……} | |
| width:60px; height:75px; | 定義想放置的圖框寬、高。 將原本樣式的 CLASS 重新改寫，寬高改為 60px、75px。也就是設定要放置圖片的框的大小。 想單圖放置時，最好是將框調整成與圖同高，看下面 center 及 no-repeat 說明時您會瞭解的。 |
| background:URL(圖址) | 將要放置的圖變成背景來呈現，這裡的 URL 要指向您想放的圖檔連結位址。 |
| center | 是讓這圖檔在這框為置中（指上下、左右都置中），左右欄放置圖檔的寬經測不要超過 130px。 |
| no-repeat | no-repeat 不重複貼圖。用 repeat=重複 ，可佈滿框內。 用 repeat-x 則於X軸（水平）佈滿。用 repeat-y 則於Y軸（垂直）佈滿。 |
語法範例：
| /* 變更個人性別圖 */ #ymodprf .horos img{display:none;} #ymodprf .horos{width:130px; height:134px; background:url(http://hk.geocities.com/love99_h/Gif/Male/MZ001.gif) center no-repeat; } |
改變更新日期前圖示：
| /* Module latest upup 改變更新日期前圖示＜模組 最近的 結束＞*/ #ymodupdate .mbd .date{background:url(圖址) left center no-repeat; padding-left:35px; font-size:115%; } | |
| #ymodupdate .mbd .date{……} | |
| background:url(圖址) no-repeat; | 圖示位址，不重複貼圖 |
| padding-left:35px; | 日期距離框左側多遠＜補白：左側＞ |
| font-size:115%; | 日期字體大小 |
| font-family:verdana; | 定義字體＜字－家族：verdana＞ |
| left center 或 right left | 這二個 左側 中央 或 右邊 左邊，測了半天也沒啥作用 |
語法範例：
| /* Module latest upup 改變更新日期前圖示 */ #ymodupdate .mbd .date{background:url(http://hk.geocities.com/love99_h/Gif/Sg/SgFlower004.gif) no-repeat; padding-left:35px; font-size:115%; } |
定義月曆上今天日期的字色及大小
| /* 定義月曆上今天日期的字色及大小 */ #ymodcal .mbd td strong{ color:#FF0000; font-size:120%; } | |
| #ymodcal .mbd td strong{……} | modcal=形式上、形態上。strong=強壯的、堅固的 |
| color:#FF0000; 及 font-size:120%; | 同樣是在定義字色及大小 |
語法範例：
| /* 月曆上今天日期的字色及大小 */ #ymodcal .mbd td strong{ color:#FF0000; font-size:120%; } |
音樂語法：（轉貼知識）關於ｙａｈｏｏ背景音樂．．
動畫語法：【小燕子教學】發表動畫文章*語法
滑鼠語法：【小燕子教學】滑鼠游標語法
部落格須知：﹝小燕子開講﹞貼語法貼到自訂樣式亂掉了，該怎麼辦？
﹝小燕子開講﹞為什麼引用格友的文章，發表文章後，圖檔看不到哩？
﹝小燕子開講﹞如何在發表文章、文章回應、留言板上貼ｇｉｆ動畫圖呢？
上傳教學：【小燕子的教學】製作基本ｌｏｇｏ＆感謝大家的支持～
佈置部落格語法：【小燕子教學】變更訂閱部落格的圖片*語法
【小燕子教學】更改yahoo部落格、會員登入的顏色及背景圖案*語法
【小燕子教學】最新文章、最新回應、文章分類等等的標題底圖或插圖*語法
自訂欄位語法：【小燕子教學】小燕子自創部落格*投票語法
【小燕子教學】自訂欄位貼圖(含〝心靈享燕音樂會〞的音樂前面加小圖)
*http://tw.myblog.yahoo.com/jw!.FrenJubHhQI9WKmKTrcqw--/article?mid=480&pk=%E8%AA%9E%E6%B3%95%E6%95%99%E5%AD%B8%E9%83%A8%E8%90%BD%E6%A0%BC
