跳到主文
我喜歡淡淡的想你 我喜歡看樹枝上那淡淡的嫩綠。 它是春天的使者,它是清晨的開始,它是朝氣蓬勃的先驅,它提醒你現在是雨後的潔淨與清新…… 歡迎光臨╰☆ Myshero520╭☆在痞客邦的小天地~
部落格全站分類:收藏嗜好
從"雅虎"搬來之後一直沒空上網...(103年5月下旬)昨天點了幾篇"舊文"
沒想到 "文章框架" 全變了樣,真的慘不忍睹啦...
初來乍到一切還在適應中..."留言、回應" 回覆慢請見諒嘿...本格修復中...
~~感謝"芭樂園"分享~(請關掉背景音樂)~~
定義左右欄頂欄:/* 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-repeatleft 0.1em這個應不用再介紹了當然不重複貼圖,否則會貼滿整欄框應該是指圖與左邊距離,結果字卻下沈。不用設它。(em 約為M一鉛字所佔之面積,為印刷字體之計量單位)padding-left:20px;文字與左邊緣的距離,當然要比圖示寬些嘍~<補白-左:>margin-bottom:7px;行距(與下一段落的距離)<邊、頁邊的空白-底部:>line-height:1.5em列高(可以不用設) .ycntmod .mbd ul.list li.more {……}在所有文章、更多回應前加圖示<more=另外的、附加的>background:url(圖址)50pxno-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-repeatno-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%; } 前言主文區左右欄框部落格主體部落格頂部的三橫框部落格範本其他功能效果發文 常用語法網路空間申請教學CSS 語法教學連結myshero重新整理編輯\97.07.29-02
定義左右欄頂欄:
語法說明: (標題框大小=150*30)
語法範例:
定義左右欄內容區:
語法說明:
連結字串前加圖示
說明:
變更個人性別圖:
改變更新日期前圖示:
定義月曆上今天日期的字色及大小
myshero重新整理編輯\97.07.29-02
~學習修改文章框架 來自~~"隨芯所欲"的作品~~~
╰☆ Myshero520╭☆
Myshero 發表在 痞客邦 留言(0) 人氣()
留言列表