【常用ＣＳＳ語法集合】

方格發表於 2012-10-10 02:51:46

【常用ＣＳＳ語法集合】
 
1.將所選用的圖片網址，加到語法中 2.你的大頭貼下方【編輯個人檔案】→ 【面板設定】→【自訂樣式】 3.將需要語法貼到自訂樣式（css語法）中 /*blog profile 部落格檔案、個人資料、自我介紹加圖片*/ table#bloginfo th {background:url(部落格檔案標題圖片的網址);} table#bloginfo td {background:url(部落格檔案敘述圖片的網址);} table#usrinfo th {background:url(個人資料標題圖片的網址);} table#usrinfo td {background:url(個人資料敘述圖片的網址);} #yusrintro p {background:url(自我介紹圖片的網址);}  【更換標題圖】BODY { Font-Family: verdana; TEXT-ALIGN: center; } #yblogtitle h1 {     display:block;     float:left;     background:url(圖片網址) 0 0 no-repeat;     width:寬px;     height:高px;     font-size:0;     line-height:0;     text-indent:-5000px;     overflow:hidden;     cursor:pointer;     cursor:hand;}
【Opacity for blast招呼語字體顏色圖框置中】
#yblast .text{color:#字體顏色;} #yblast{text-align:center} #yblast .text{font-size:14px(字體的尺寸);font-weight:bolder} #yblast .bg{background-image:url(網址);background-repeat:no-repeat; background-position:50%(圖檔左右移動) 80%(招呼語圖下邊緣與中間最新文章距離);width:540px(圖檔的寬度);height:66px(圖檔的高度)}
招呼語不設定圖檔以文字替
/*招呼語色+調整高度+置中+字體大小*/ #yblast .bg {background: transparent no-repeat} #yblast .text{color:#ffffff;padding-top:30px;} #yblast{text-align:center} #yblast .text{font-size:14px;font-weight:bolder}
 【更換性別圖】
/*更換性別圖*/ #ymodprf .horos img{display:none;} #ymodprf .horos{width:寬px;height:高px;background:url(圖片網址) center no-repeat;}
【更換訂閱圖】
/*btnsbsrb更換訂閱部落格圖示*/ 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;}
【更換背景圖】
背景圖固定
『需調整角度』
/*Background*/ body { background-image: url(圖片網址); background-repeat:no-repeat ; background-position :50% 50%; background-attachment: fixed;}
百分率表＂
backgroud-position: 0% 0%; 左邊上方 backgroud-position: 0% 50%; 左邊中間 backgroud-position: 50% 0%; 中間上方 backgroud-position: 50% 50%; 正中間 backgroud-position:100% 0%; 右邊上方 backgroud-position: 0% 100%; 左邊下方 backgroud-position: 100% 50%; 右邊中間 backgroud-position: 50% 100%; 中間下方 backgroud-position: 100% 100%; 右邊下方
『以圖片大小』
/*Background*/ body{background-image:url(圖片網址);background-attachment:fixed;}
【背景圖重複】
/*Background背景圖重複*/ body{background:#000000 url(圖片網址) repeat;} 
【更換回應引用圖】
/*make coomment bar*/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;}
/*guestbook留言版加圖片*/
#ymsgboard q a {background:url(留言板按鈕圖網址) ;} #ymsgboard .mhd {background:url(留言板標題圖網址) ;} #ymsgboard .mbd {background:url(留言板底圖網址) ;}
【更換滑鼠游標】
一種游標
body{cursor:url(游標圖檔)} 
兩種游標
body{cursor:url(游標圖檔1)} a:hover{cursor:url(游標網址2)}
【更換邊框】
無框線版面－讓整個部落格框線消失語法＂
/*shared rounded corner for all modules無框線語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url() left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url() right top no-repeat;height:5px;font-size:0;position:relative;right:-5px;} .ycntmod .rcbtm {zoom:1;background:url() left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url() right bottom no-repeat;height:5px;font-size:0;position:relative;right:-5px;} .ycntmod .rcl {padding-left:5px;background:url() repeat-y;} .ycntmod .rcr {zoom:1;padding-right:5px;background:url() right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;} 
邊框線面板－多重框框語法＂
/*Opacity for blogtitle*/ #yblogtitle .rctop, #blogtitle .rctop div, #yblogtitle .rcl, #yblogtitle .rcr, #yblogtitle .rcbtm, #yblogtitle .rcbtm div {zoom:1; filter:alpha(opacity:70) border-bottom:3px double 色碼; border-top:3px double 色碼; border-left:3px double 色碼; border-right:3px double 色碼} 
 /*Opacity for main content*/ .yc3pribd .rctop,.yc3pribd .rctop div,.yc3pribd .rcl,.yc3pribd .rcr,.yc3pribd .rcbtm,.yc3pribd .rcbtm div {zoom:1; filter:alpha(opacity:70) border-bottom:3px double 色碼; border-top:3px double 色碼; border-left:3px double色碼; border-right:3px double 色碼} 
 /*Opacity for sub column*/ .yc3subbd .rctop,.yc3subbd .rctop div,.yc3subbd .rcl,.yc3subbd .rcr,.yc3subbd .rcbtm,.yc3subbd .rcbtm div, .yc3sec .rctop,.yc3sec .rctop div,.yc3sec .rcl,.yc3sec .rcr,.yc3sec .rcbtm,.yc3sec .rcbtm div {zoom:1; filter:alpha(opacity:70) border-bottom:3px double 色碼; border-top:3px double 色碼; border-left:3px double 色碼; border-right:3px double 色碼} 
 邊框圖版面－讓整個部落格加邊框圖語法＂
/*shared rounded corner for all modules加框語法*/ .ycntmod {width:100%;position:relative;margin-bottom:10px;overflow:hidden;} .ycntmod .rctop {zoom:1;background:url(上邊框圖檔網址) left top no-repeat;margin-right:5px;} .ycntmod .rctop div {background:url(右上角圖檔網址) right top no-repeat;height:30px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcbtm {zoom:1;background:url(下邊框圖檔網址) left bottom no-repeat;margin-right:5px;} .ycntmod .rcbtm div {background:url(右下角圖檔網址) right bottom no-repeat;height:30px;font-size:0;position:relative;right:-5px;}
.ycntmod .rcl {padding-left:12px;background:url(左邊框圖檔網址) repeat-y;} .ycntmod .rcr {zoom:1;padding-right:12px;background:url(右邊框圖檔網址) right repeat-y;} .ycntmod .text {position:relative;word-break:break-all;} .yc3pribd .ycntmod{overflow:visible;} .yc3pribd .ycntmod .yblogcnt{overflow:hidden;}
【自定欄位貼圖】
沒連結
<img src="圖檔網址">
有連結
<a href="連結網址"><img src=" 圖片網址"><a>></a>
【自定欄位貼樂果】樂果＝ＬＯＧＯ
<center> <a href="網址"><img src="圖片網址" alt=""""""""""""""""""""""""註解文字"""""""""""""""""""""""" border="0" width="88" height="31"></a> <table border="1" width="126" cellspacing="0"><tr><td>&lt;a href=&quot;網址&quot;&gt;&lt;img src=&quot;圖片網址&quot; alt=""""""""""""""""""""""""&quot;註解文字&quot;"""""""""""""""""""""""" border=&quot;0&quot;&gt;&lt;/a&gt;</td></tr></table> </center>
目錄放置
<IMG src=目錄圖網址> <A href="留言網址"><IMG src="留言圖片網址"></A> <A href="相簿網址"><IMG src="相簿圖片網址"></A> <A href="自製網址"><IMG src="自製圖片網址"></A>
文字連結語法
<a href="網址">文字</a>
 【框線語法】
 /*部落格大框線*/ body {border: 框線大小px double #框線色碼;}
/*部落格周圍框線*/ html{ border-top : 大小px solid #色碼; border-bottom : 大小px solid #色碼; border-left : 大小px solid #色碼; border-right : 大小px solid #色碼; }
【按鈕框框】
/*按鈕框框*/ input,select{ background: #框底色碼; color: #文字色碼; border: 1px solid #框線色碼; FONT-SIZE: 9px; font-family:verdana;}
【Links連結效果】
/*Links連結去底線*/ a,a:link,a:visited{color:#未連結時色碼;text-decoration: none} a:hover{color:#連結時色碼;text-decoration: none;}
/*Links連結浮出效果*/ a:hover{ border: 2px #文字色碼 outset } 
 /*Links連結移下效果*/ a:hover { position:relative;top:1px;left:1px;}
【隱藏相關語法】
/*Profile隱藏自我介紹欄*/ #ymodprf{display:none} 
/*Blog album module隱藏部落格相簿欄位*/ #ymodalbum{display:none;}
/*隱藏留言板*/ #ymodmsgbd h3{display:none}
/*隱藏我要留言免受廣告干擾*/ #yblast .text a{display:none;} 
隱藏【留言時間
.yvstrcmnthd .date {display:none;} .yvstrcmnthd cite {display:none;}
/*招呼語圖框我要留言字樣刪除*/ #yblast .text a{display:none;}
/*隱藏招呼語*/ #yblast{display:none;} 
/*Blog latest update module隱藏更新日期欄*/ #ymodupdate{display:none}
/*隱藏搜尋欄位*/
#boxSearch{display:none;} 
/*隱藏最新回應欄位*/
#boxNewComment{display:none;} 
/*隱藏回應按鈕*/ div.btncomment a {display:none;} 
/*隱藏回應欄位*/ #rtemodule {display:none;}
/*隱藏參觀人氣欄位*/#boxCounter{display:none;} 
 /*隱藏參觀人氣字樣*/.boxCountero{display:none;} 
 /*隱藏參觀人氣標題*/.boxCounter1{display:none;} 
/*隱藏rss圖示*/.syndicate{display:none;} 
/*獨立顯示留言板按鈕*/ #ymodmsgbd .mhd {display:block;}
/*獨立顯示相簿按鈕*/ #ymodalbum .mhd {display:block;}
/*隱藏內文發表日期*/ /*隱藏發文時間*/ #ypartsingle .date,#yarticle .date {display:none}
隱藏 ( 個 ) 篇文章引用按鈕 (HTML編輯中，在最後面加入一段語法)
<style>  </style>
隱藏個人暱稱
#ymodprf .nickname{display:none}
隱藏個人星座
#ymodprf .horos{display:none}
隱藏性別小圖示
#ymodprf .horos img {display:none}
/*強制下方捲軸不出現*/ body{overflow-x:hidden;}
/*Blog category list module隱藏左右欄位標題*/ .yc3sec .mhd,.yc3sub .mhd{display:none} .yc3sec .mbd,.yc3sub .mbd{zoom:1;filter:alpha(opacity:底圖透明度)}
/*Article隱藏文章寬欄位*/.yc3pribd .mhd{display:none} .yc3pribd .mbd{zoom:1;filter:alpha(opacity:底圖透明度)}
/* 隱藏頁首和頁尾*/ #yhtw_masthead,#yhtw_mastfoot{display:none;}
/*隱藏下方捲軸奇摩頁尾*/ body{overflow-x:hidden;}#yhtw_mastfoot{display:none;}
 /* 隱藏整個部落格*/
body{background-image:url(背景圖網址); background-attachment:fixed;} .ycntmod { filter:alpha(opacity:0); }
隱藏【訂閱部落格】IE瀏覽器
#btnsbsrb_nologin{display:none;}
/*Opacity for blast 隱藏整個部落格語法*/Firefox 火狐瀏覽器
#yblast .bg {filter:alpha(opacity:0); } #ymodprf {display:none;} #usrinfo {display:none;} #yblast {display:none} #yleavemsg {display:none} #ymsgboard {display:none} #ymodalbum, #yphtgallery {display:none} #ymodupdate {display:none} #ybloginfo, #yusrintro {display:none } #btnsbsrb_nologin {display:none} #yartcmt {display:none} .ycmntreply {display:none} #rtemodule {display:none} #yarticle, #ysbscrblist {display:none } #yBlogtitle .mbd, #yBlogtitle .mft{color:000000; filter:alpha(opacity=0);} #yblogtitle a {text-decoration: none} #yblogtitle .rctop, #yblogtitle .rctop div, #yblogtitle .rcbtm, #yblogtitle .rcbtm div, #yblogtitle .rcl, #yblogtitle .rcr { filter:alpha(opacity:0) } .tft #btnsbsrb { display:none } #yusrinfo { display:none } #yhtw_mastfoot {display:none}
【鎖右鍵語法】
/*滑鼠鎖右鍵專用語法document body oncontextmenur*/ body {star:expression( document.body.oncontextmenu  = function(){return false;});} 
 
 
引用：<A href="http://tw.myblog.yahoo.com/jw!r.L3eSWBFRJeZrvXCECJqYdP4uvr3g--/article?mid=5007">http://tw.myblog.yahoo.com/jw!r.L3eSWBFRJeZrvXCECJqYdP4uvr3g--/article?mid=5007</A>

頁: [1]

【五術堪輿學苑】's Archiver

【常用ＣＳＳ語法集合】