24h購物| | PChome| 登入
2008-03-25 13:46:58 | 人氣24| 回應0 | 上一篇 | 下一篇

【部落格素材教學法】中間最新文章『上欄』加入底圖外圍設定虛線顏色

推薦 0 收藏 0 轉貼0 訂閱站台

 

中間最新文章『上欄』加入底圖外圍設定虛線顏色

 

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

/*Main content header*/ .yc3pribd .mhd{
     background:#B9D449;
     color:#333333;}

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

 

現在把語法做個變化  ↓

/*Main content header中間最新文章上欄標題底色+虛線顏色+文字置中*/
.yc3pribd .mhd{font-size:120%;background-color:#ffffff;color:#000000;border:6px dotted #9A0000;text-align:center;}

語法註解: ↓

font-size:120%←最新文章字體尺寸

background-color:#ffffff ←上欄底色

;color:#000000 ←最新文章字體色

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

;TEXT-ALIGN: center ←最新文章文字置中→此段不想讓文字置中可刪除

 

此段語法 ↓上欄標題加入圖檔

/*Main content header中間最新文章上欄標題加入圖檔設定虛線顏色*/
.yc3pribd .mhd{font-size:120%;background:url(
http://i157.photobucket.com/albums/t46/IMGFBR2/Background55.gif) repeat;color:#000000;border:6px dotted #9A0000;TEXT-ALIGN: center;}

語法註解: ↓

font-size:120%  →最新文章字體大小

;background:url(圖檔網址) 放入任何適合的圖檔

repeat →重複底圖,假如你的圖檔過寬則可加入 no-repeat 就是不重複底圖

color:#000000 → 最新文章字樣色

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

;TEXT-ALIGN:center → 最新文章文字置中 ── 不想讓文字置中可刪除此段

設定好虛線跟圖檔

更外圍還有一層框線,該如何刪除?只要加入下列語法↓

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

語法註解: ↓

font-size:120% ←最新文章字體尺寸

background:url( 圖檔 ) ←底圖網址

50%  repeat ←圖檔左右移動 0% 顯示圖檔左側 100%顯示圖檔右側

 而你的圖檔若是自製或剛剛好符合標題尺寸,把50%  repeat改成→no-repeat 不重複,假若圖檔過小,把no刪除,變成repeat 就是重複的圖檔

;height:70px ← 圖檔尺寸

;color:#000000 ← 最新文章字體顏色

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

;TEXT-ALIGN: center ← 最新文章文字置中→此段不想讓文字置中可刪除


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

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

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

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

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

台長: 落葉之楓

是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼:
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文