2008-03-25 13:47:55 落葉之楓

【部落格素材教學法】中間最新文章『下欄』內文設底圖外圍設虛線

 

中間最新文章『下欄』內文設底圖外圍設虛線

 

此段是奇摩本身最新文章上欄標題語法↓

/*Main content body中間最新文章上欄標題語法*/
.yc3pribd .mbd, .yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p{
background:#D9D9D9;color:#333} #ymodcal .mbd td strong {color:#fff;}

以下的設定,分段設語法,每增加或減少語法,都有不同變化。請看註解: ↓

 

現在把語法做個變化↓

/*Main content body中間最新文章下欄內文設底圖外圍設虛線*/
.yc3pribd .mbd{font-size:120%;background:url(
http://i157.photobucket.com/albums/t46/IMGFBR2/Background69.gif); #ffffff;color:#000000;border:6px dotted #9A0000;}
.yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p {background:transparent;color:#000000;}

語法註解: ↓

font-size:120%←內文字體尺寸

;background:url( 網址 ) ; #ffffff ←內文加上底圖

#ffffff是沒放底圖文章的底色

;color:#000000←內文字體顏色

;border:6px dotted #9A0000;} ←設定外圍虛線顏色  →6px虛線尺寸

{background:transparent;color:#000000;} ← 部落格檔案、個人資料字體顏色


不放底圖直接使用色碼顏色↓

/*Main content body中間最新文章下欄內文設定語法*/
.yc3pribd .mbd{font-size:120%;background:#ffffff;color:#000000;border:6px dotted #9A0000;}
.yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p {background:transparent;color: #000000;}

語法註解:↓

font-size:120%;←字體大小

background:#ffffff ←內文底色

;color:#000000 ←內文字體色

;border:6px dotted #9A0000 ← 外圍虛線色  6px→虛線尺寸

{background:transparent;color:#000000;}←部落格檔案、個人資料字體顏色

當我們設定好外圍虛線後,

虛線的外圍還有一層框線,如何消除?只要加上下面這段語法↓

/*shared rounded corner for all modules 左右中間欄無框語法*/
.ycntmod {width:100%;position:relative;margin-bottom:1px;overflow:hidden;}
.ycntmod .rctop {background:left top no-repeat;margin-right:0px;}
.ycntmod .rctop div {background:right top no-repeat;height:0px;font-size:0;position:relative;right:-0px;}
.ycntmod .rcbtm {background:left bottom no-repeat;margin-right:0px;}
.ycntmod .rcbtm div {background:right bottom no-repeat;height:0px;font-size:0;position:relative;right:-0px;}
.ycntmod .rcl {padding-left:0px;background:repeat-y;}
.ycntmod .rcr {padding-right:0px;background:right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


 

↑這張的預覽圖是全部中間最新文章設定好的成果,總語法如下↓

/*Main content header中間最新文章上欄標題底圖+虛線顏色+文字置中*/
.yc3pribd .mhd{font-size:120%;background:url(
http://i221.photobucket.com/albums/dd25/tinaseed/1016blog/blog51.gif) 50%  repeat;height:70px;color:#000000;border:6px dotted #9A0000;TEXT-ALIGN: center;}

/*Main content body中間最新文章下欄內文設底圖外圍設虛線*/
.yc3pribd .mbd{font-size:120%;background:url(http://i157.photobucket.com/albums/t46/IMGFBR2/Background69.gif); #ffffff;color:#000000;border:6px dotted #9A0000;}
.yc3pribd .mft, #yreplymsg table, #ysbscrblist table, #ybloginfo table, #yusrinfo table, #yusrintro p {background:transparent;color:#000000;}

/*shared rounded corner for all modules 左右中間欄無框語法*/
.ycntmod {width:100%;position:relative;margin-bottom:1px;overflow:hidden;}
.ycntmod .rctop {background:left top no-repeat;margin-right:0px;}
.ycntmod .rctop div {background:right top no-repeat;height:0px;font-size:0;position:relative;right:-0px;}
.ycntmod .rcbtm {background:left bottom no-repeat;margin-right:0px;}
.ycntmod .rcbtm div {background:right bottom no-repeat;height:0px;font-size:0;position:relative;right:-0px;}
.ycntmod .rcl {padding-left:0px;background:repeat-y;}
.ycntmod .rcr {padding-right:0px;background:right repeat-y;}
.ycntmod .text {position:relative;word-break:break-all;}
.yc3pribd .ycntmod{overflow:visible;}
.yc3pribd .ycntmod .yblogcnt{overflow:hidden;}


虛線設定方面,琳,尺寸設成6px是要讓各位看的清楚點,一般的設定大概在3px就行了

使用本語法時,請記得,先複製在記事本上。記事本在哪?你〈妳〉的 電腦  ↓

開始→程式集→附屬應用程式→系統工具延展打開就可以看到記事本了。

備份在記事本上,每次更改完後重複的貼在記事本,需要時方便參考!

紫蘿琳 隨藝坊 http://tw.myblog.yahoo.com/jw!YFl.6UmaHk9bFp1B_BIetSfj/profile