(語法教學) 部落格語法教學大解說 {很詳細的喔}

2013082713:28

(語法教學) 部落格語法教學大解說 {很詳細的喔}

定義左右欄頂欄：

/* 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%; }