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

2009081601:42

 

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

 

定義左右欄頂欄:
/* 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背景音樂..  

     【小燕子教學】音樂語法

                       【小燕子教學】部落格之音樂播放器*語法

影片語法:【小燕子教學】上傳影音檔及貼影片或MV*語法

     【小燕子教學】貼youtube影片語法

動畫語法:【小燕子教學】發表動畫文章*語法

滑鼠語法:【小燕子教學】滑鼠游標語法

     【小燕子語法教學】滑鼠游標教學-第2部

部落格須知﹝小燕子開講﹞貼語法貼到自訂樣式亂掉了,該怎麼辦?

      ﹝小燕子關心您﹞〝請做好部落格自訂樣式的備份工作〞

      ﹝小燕子開講﹞為什麼引用格友的文章,發表文章後,圖檔看不到哩?

        ﹝小燕子開講﹞何謂文章引用?  

       ﹝小燕子開講﹞何謂訂閱部落格?

       ﹝小燕子開講﹞怎麼找出部落格裏的搜尋功能呢?

        ﹝小燕子開講﹞如何在發表文章、文章回應、留言板上貼gif動畫圖呢?

上傳教學:【小燕子的教學】製作基本logo&感謝大家的支持~

     【小燕子教學】上傳圖檔*變成*屬於自己的圖片網址

     【小燕子教學】上傳音樂檔*變成*音樂網址

佈置部落格語法:【小燕子教學】變更訂閱部落格的圖片*語法

        【小燕子教學】更改yahoo部落格、會員登入的顏色及背景圖案*語法

        【小燕子教學】招呼語外觀語法

        【小燕子教學】左右欄位.置入美美的底圖*語法

        【小燕子教學】文章底圖置入美美的背景圖* 語法

        【小燕子教學】滑鼠移至連結時,字變色*語法

        【小燕子教學】滑鼠移至連結時,字外圍加有顏色的框框*語法

        【小燕子教學】部落格標題名稱變更顏色*語法

        【小燕子教學】GIF或JPG背景圖不隨捲軸移動*語法

        【小燕子教學】捲軸語法

        【小燕子教學】調整部落格透明度

        【小燕子教學】文章標題前加入小圖片*語法

        【小燕子教學】最新文章、最新回應、文章分類前加小圖*語法

        【小燕子教學】更新日期前加小圖*語法

        【小燕子教學】更改右邊或左邊欄位標題的字體*語法

        【小燕子教學】最新文章、最新回應、文章分類等等的標題底圖或插圖*語法

        【小燕子教學】更改個人資料的性別圖案*教學

 

       【小燕子教學】製作DIY相片聯播&語法

       【小燕子教學】申請計數器&語法

       【小燕子教學】申請*線上人數*計數器&語法

       【小燕子教學】停留時間語法

       【小燕子教學】圖片連結語法

       【小燕子教學】自訂欄位貼圖(含〝心靈享燕音樂會〞的音樂前面加小圖)

*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