close

常用的css語法整理

 

這些是常用的 css語法,我整理出來,讓大家參考。加油喔~~

怎樣修改呢?css在哪裡呢?
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(
自我介紹圖片的網址);}

 

/*自訂欄位寬度三欄式*左欄寬150右欄寬200*/
.thrcol .yc3main {width:100%;float:left; margin-left:-210px;}
.thrcol .yc3mainbd {margin-left:210px;}
.thrcol .yc3pri {width:100%;float:right;margin-right:-160px;}
.thrcol .yc3pribd {margin-right:160px;}
.thrcol .yc3subbd {width:200px;float:right;}
.thrcol .yc3sec {width:150px;}
.thrcol .yc3sub{z-index:1;}
.thrcol .yc3pri,.thrcol .yc3main{z-index:10;}

  每個人版型設定不同。(使用二欄式或三欄式)

             如果您要更改自訂欄位的寬度,詳細內容請閱讀怎樣加寬自訂欄位?

 

/*自訂欄位連結列自動加框*/
.ycntmod .mbd ul.list li {BACKGROUND: url(
底圖網址 ) 0% 100%; COLOR:white; border:5px;  BORDER-TOP-STYLE: double; BORDER-RIGHT-STYLE: double; BORDER-LEFT-STYLE: double; BORDER-BOTTOM-STYLE: double;}

 外框的樣式有8種,可更改顏色、粗細、距離,詳細說明請閱讀自動加框

 

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

 

/*comment list management管理回應欄*/
.listbd {background:url(
管理回應底圖網址); color:#文字顏色之色碼;}
#ycmntlist table th {background: url(
管理回應標題圖網址); color: #文字顏色之色碼; }
#ycmntlist .btncmntre {background:url(
管理回應按鈕圖網址);}

 

/*guestbook留言版加圖片*/

#ymsgboard q a {background:url(留言板按鈕圖網址) ;}
#ymsgboard .mhd {background:url(
留言板標題圖網址) ;}
#ymsgboard .mbd {background:url(
留言板底圖網址) ;}

 

/*Article隱藏文章寬欄位*/
.yc3pribd .mhd{display:none}
.yc3pribd .mbd{zoom:1;filter:alpha(opacity:
底圖透明度)}

/*Blog category list module隱藏左右欄位標題*/
.yc3sec .mhd,.yc3sub .mhd{display:none}
.yc3sec .mbd,.yc3sub .mbd{zoom:1;filter:alpha(opacity:
底圖透明度)}

/*Blog album module隱藏部落格相簿*/
#ymodalbum{display:none;}

/*隱藏留言板*/
#ymodmsgbd h3{display:none}

/*Blog latest update module隱藏更新日期*/
#ymodupdate{display:none}

/*Profile隱藏自我介紹欄*/
#ymodprf{display:none}

/* 隱藏頁首和頁尾*/
#yhtw_masthead,#yhtw_mastfoot{display:none;}

/* 隱藏整個部落格*/

body{background-image:url(背景圖網址); background-attachment:fixed;}
.ycntmod { filter:alpha(opacity:0); }

 隱藏整個部落格的語法 ,使用 Firefox 火狐瀏覽器無法隱藏...IE瀏覽器才可以隱藏部落格  。如果您是使用Firefox 火狐瀏覽器,詳細語法請閱讀隱藏部落格

 

/*Links連結去底線*/
a,a:link,a:visited{color:#
未連結時色碼;text-decoration: none}
a:hover{color:#
連結時色碼;text-decoration: none;}

/*Links網頁超連結虛線框*/
a,a:link,a:visited{color:#
色碼;text-decoration:none}
a: hover{color:#
色碼;background-image:url(http://圖檔網址.gif);background-repeat: repeat;border:1px dotted #色碼;position:relative;top:1px;left:1px}

/*Links連結浮出效果*/
a:hover{ border: 2px #fff outset }

 

/*Background背景圖底圖重複*/
body{background:#ffffff url(
背景圖網址) repeat;}

/*Background背景圖底圖固定*/
body{ background:#ffffff url(
背景圖網址) no-repeat;background-attachment: fixed}

/*部落格標題圖*/
#yblogtitle h1 { display:block; float:left; background:url(
標題圖網址)no-repeat; width:圖片寬度px;  height:圖片高度px; font-size:0; line-height:0; text-indent:-5000px; overflow:hidden; cursor:pointer;  cursor:hand;}

/*Blog title標題置中*/
#yblogtitle .mbd,#yblogtitle .mft{font-size:180%;color:#
色碼;font-family:新細明體; color:#D23C78;text-align:center;}
#yblogtitle .thd a{width:168px;height:40px;top:-0px;position:relative;left:0px;display:block;}
#yblogtitle .thd h1 {font-size:180%;color:white;font-family:
新細明體;}

/*Module latest upup更新日期前小圖*/
#ymodupdate .mbd .date{background:url(
小圖網址) left center no-repeat;padding-left:11px;font-size:104%;font-family:verdana;}

/*Nav module list左右欄位小圖*/
.ycntmod .mbd ul.list li {background:url(
小圖網址1) left .1em no-repeat;padding-left:25px;margin-bottom:3px;_margin-bottom:3px;_line-height:1.5em;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(
小圖網址2) 20px center no-repeat;}

/*Article content module文章前小圖


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 KAREN 的頭像
    KAREN

    打皂浪漫-KAREN的手工皂藝想世界

    KAREN 發表在 痞客邦 留言(2) 人氣()