close




 


。。。--------------------------------------------------------------------------------------------。。。


【 +  Teaching* -- 教學解說 + 】


★ 星羽的部落格 L o G o :  



★ 本站網址: http://tw.myblog.yahoo.com/shine-starwing 


★ 教學課程內容:【CSS部落格基本語法說明】


★ 其他部落格問題 : 問題精選


★ 版主的話 :  基本上更改yahoo部落格的基本語法


就是這些了,其實還滿多人問我的˙口˙"


不過...說真的= =  大部分人都根本沒有爬文,就猛問= _ ="  (答案在css語法區都找的到)


除非...你問的語法我根本沒有使用或是我根本不會( 那問我有什麼意義呢?


在你想問其他語法之前 → CSS語法     先給我到css語法區好好看看過一次!!!


我相信裡面有相當多好用實用的語法   (好歹我收集很久= =)


沒去認真查,就問的人 我沒什麼必要回答。


這次 是為了有些剛進來的人 不了解那些語法名稱是搭配在部落格的哪裡使用


而製作的講解+圖示


這些就是一個基本yahoo面版製作的方法了


而進階版的製圖問題(也就是你要自己製作部落格面板)


請去 →  製圖教學  


製圖有問題,問我的話我一定不會回答你,就這樣。


網路上的資源太多了,隨便踢都有


自己試著找出來,成就感還比較大呢


另外,這是最基本的CSS語法


還有進階的(改更多東西)


如果有需要的話,就請回應告知瞜


不然一律去  CSS語法  找


★ 使用方法: 請依照圖片上標示的1-10來看,每一號的語法以及使用的地方我都有標示過了。


把圖片網址、圖片寬度、圖片高度等等做修改即可


*右鍵--內容--即可看見圖片網址&圖片高度&寬度


將紅色部分做些改即可//*


。。。--------------------------------------------------------------------------------------------。。。



無法顯示圖片者,請點擊→  http://img171.imageshack.us/img171/5553/asdrf.jpg


。。。--------------------------------------------------------------------------------------------。。。


《 1 》 標題圖


#yblogtitle h1 {
display:block;
float:left;
background:url(圖片網址) 0 0 no-repeat;
width:px;
height:px;
font-size:0;
line-height:0;
overflow:hidden;
cursor:pointer;
cursor:hand;}#yblogtitle .mbd{text-align:center;}
#yblogtitle .mbd .thd{background-repeat:no-repeat;background-position:0% 100%;width:px;height:px;text-align:center;}
#yblogtitle h1{color:#78AEFF;font-weight:bold;}
#yblogtitle .rctop, #yblogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm,
#yblogtitle .rcbtm div{zoom:1;}


《 2 》訂閱圖


div#btnsbsrb a{display:block;width:圖片寬度px;height:圖片高度px;overflow:hidden;background:url(訂閱圖網址) no-repeat;margin:0;}
div#btnsbsrb_nologin a{display:block;width:圖片寬度px;height:圖片高度px;overflow:hidden;background:url(訂閱圖網址) no-repeat;margin:0;}
#yblogtitle .tft {text-align:right;padding-bottom:0px;position:relative;}


《 3 》招呼語框(文字置中


#yblast .bg {zoom:1;background:url(圖片網址) no-repeat;}


《 4 》頭貼/頭像/ICON


管理部落格→個人相片→上傳


《 5 》 性別圖 (圖片寬度請勿超過120)


#ymodprf .horos img{display:none;}
#ymodprf .horos{width:圖片寬度px;height:圖片高度px;background:url(性別圖網址) center no-repeat;}


《 6 》 首頁看板 ( 告示牌 )   *基本上用於有頂置文章的部落格*又稱"首頁看板"


這是貼在文章裡面的, 觀看HTML 原始碼   道裡面貼上語法,加上圖片網址完成語法之後


在將 觀看HTML 原始碼 的打勾點掉,你就可以預覽成品瞜 : )


貼圖語法:


<img src=圖片網址>


《 7 》回應、引用 


div.btncomment a {display:block;height:圖片高度px;width:圖片寬度px;background:url(我要回應圖片網址) no-repeat;}
div.btntrackback a {display:block;height:圖片高度px;width:圖片寬度px;background:url(我要引用圖片網址) no-repeat;}


《 8 》 回應欄位上方圖式


#rtemodule {background:url(圖片網址) no-repeat scroll center top;padding-top:圖片高度px;}
#ypreviewmsg .yvstrcmnt{background:transparent url(圖片網址) no-repeat scroll center top;padding-top:圖片高度px;}


《 9 》卷軸改色


html{
SCROLLBAR-FACE-COLOR: 色碼;}                       軸面顏色
SCROLLBAR-HIGHLIGHT-COLOR:色碼;}               設定軸面三角左邊顏色
SCROLLBAR-SHADOW-COLOR: 色碼;}                 設定軸面三角右邊顏色
SCROLLBAR-3DLIGHT-COLOR: 色碼;}                     左立體邊顏色
SCROLLBAR-DARKSHADOW-COLOR: 色碼;}         右立體面顏色
SCROLLBAR-ARROW-COLOR: 色碼;}                       箭頭的顏色
SCROLLBAR-TRACK-COLOR: 色碼;}                         軸軌的顏色


《 9 》背景圖 (置中)
 
body {background-image:url(圖片網址);background-repeat:no-repeat;background-position:50% 50%;background-attachment:fixed;}


。。。--------------------------------------------------------------------------------------------。。。


色碼參考區:






























































































































































































































































































































































EEEEEEFF00CCFF66FFFF00FF
DDDDDDFFCCCCFF66CCFF00CC
CCCCCCFFCC99FF6699FF0099
BBBBBBFFCC66FF6666FF0066
AAAAAAFFCC33FF6633FF0033
999999FFCC00FF6600FF0000
888888CCCCFFCC66FFCC00FF
777777CCCCCCCC66CCCC00CC
666666CCCC99CC6699CC0099
555555CCCC66CC6666CC0066
444444CCCC33CC6633CC0033
333333CCCC00CC6600CC0000
22222299CCFF9966FF9900FF
11111199CCCC9966CC9900CC
00000099CC99996699990099
FF000099CC66996666990066
EE000099CC33996633990033
DD000099CC00996600990000
CC000066CCFF6666FF6600FF
BB000066CCCC6666CC6600CC
AA000066CC99666699660099
99000066CC66666666660066
88000066CC33666633660033
77000066CC00666600660000
66000033CCFF3366FF3300FF
55000033CCCC3366CC3300CC
44000033CC99336699330099
33000033CC66336666330066
22000033CC33336633330033
11000033CC00336600330000
FFFFFF00CCFF0066FF0000FF
FFFFCC00CCCC0066CC0000CC
FFFF9900CC99006699000099
FFFF6600CC66006666000066
FFFF3300CC33006633000033
FFFF0000CC00006600000000
CCFFFFFF99FFFF33FF00FF00
CCFFCCFF99CCFF33CC00EE00
CCFF99FF9999FF339900DD00
CCFF66FF9966FF336600CC00
CCFF33FF9933FF333300BB00
CCFF00FF9900FF330000AA00
99FFFFCC99FFCC33FF990099
99FFCCCC99CCCC33CC008800
99FF99CC9999CC3399007700
99FF66CC9966CC3366006600
99FF33CC9933CC3333005500
99FF00CC9900CC3300004400
66FFFF9999FF9933FF003300
66FFCC9999CC9933CC002200
66FF99999999993399001100
66FF669999669933660000FF
66FF339999339933330000EE
66FF009999009933000000DD
33FFFF6699FF6633FF0000CC
33FFCC6699CC6633CC0000BB
33FF996699996633990000AA
33FF66669966663366000099
33FF33669933663333000088
33FF00669900663300000077
00FFFF3399FF3333FF000066
00FFCC3399CC3333CC000055
00FF99339999333399000044
00FF66339966333366000033
00FF33339933333333000022
00FF00339900333300000011
0099FF0033FF0099CC0033CC
009999003399009966003366
009933003333009900003300


。。。--------------------------------------------------------------------------------------------。。。



★--   Design By Starwing 2009 * http://tw.myblog.yahoo.com/shine-starwing  -- ★



。。。--------------------------------------------------------------------------------------------。。。

arrow
arrow
    全站熱搜

    星羽 發表在 痞客邦 留言(48) 人氣()