左右欄位+彩色邊框+底圖

本教學合併"小精靈與晨曦乍現"提供之部分語法

左右欄位加框, 語法如下 : (三選一)

/*左右欄位+彩色邊框-柏憲語法*/

.ycntmod .mbd ul.list li {margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}

/*左右欄位+彩色邊框+底圖-柏憲語法*/

.ycntmod .mbd ul.list li {background:url(底圖網址) 50% 50%;  margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}

/*左右欄位+彩色邊框+標題前小圖-柏憲語法*/

.ycntmod .mbd ul.list li {margin-bottom:7px; border-left:3px ridge #00ffff; border-right:3px ridge #ffff00; border-top:3px ridge #00ff80; border-bottom:3px ridge #ff00ff;}
.ycntmod .mbd ul.list li {background:url(小圖網址) 3% 10% no-repeat; padding-left:15px;}

語法解說 :

3% 10% no-repeat;padding-left:15px = 3% 10% 為標題小圖 X / Y 軸位置，no-repeat 圖片不重複，padding-left:15px 標題小圖與標題文字間的空隙

margin-bottom:10px 邊際(標題與標題之間距離)  10px 在此為間距值，建議2~10之間

border = 框邊

left = 左邊框

right = 右邊框

top = 上邊框

bottom = 下邊框

ridge = 脊線 ︿(請參考框線條樣式)

3px = 框線粗細像素值 (建議使用在1~5之間)

其它參考尺寸代表語法 : 點= pt、英寸= in、公分= cm、像素= px

#ff00ff = 框線顏色色碼 (可搭配個人使用的背景配色，請參考色碼表)

框線條樣式  :    ( 無、點線、實線、雙線、溝線、脊線、嵌入線、浮出線 )

相對應語法 :   none︱ dotted｜solid︱ double︱ groove︱ ridge︱ inset︱ outset

其它相關的框線應用一 : (三選一)

/*部落格描述與標題+雙框線+底圖*/

#yblogtitle .text {background: url(底圖網址); border-left:4px double #00ffff; border-right:4px double #ffff00; border-top:px double #00ff80; border-bottom:4px double #ff00ff;}
　

/*部落格描述與標題+雙框線+背景色*/

#yblogtitle .text {background:#ffffff; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

/*部落格描述與標題+雙框線+底圖+背景色*/ /*此合併語法如果圖片失效時，以預先設定的底色暫時取代*/

#yblogtitle .text {background: url(底圖網址) #0000bf; border-left:4px double #00ffff; border-right:4px double #00ffff; border-top:4px double #00ffff; border-bottom:4px double #00ffff;}

其它相關的框線應用二 :

/*四邊界+邊框*/ /*邊框顏色自行配合自己的底圖與底色*/
body {border-left:3px double #00ffff; border-right:3px double #00ffff; border-top:3px double #00ffff; border-bottom:3px double #00ffff;}

附帶 : 其他關於背景語法應用解說 ;

• background-color:#F5E2EC; /*背景色彩*/
• background:transparent; /*透視背景*/
• background-image : url(image/bg.gif); /*背景圖片*/
• background-attachment : fixed; /*浮水印固定背景*/
• background-repeat : repeat; /*重複排列-網頁預設*/
• background-repeat : no-repeat; /*不重複排列*/
• background-repeat : repeat-x; /*在x軸重複排列*/
• background-repeat : repeat-y; /*在y軸重複排列*/
• 指定背景位置 [ 以下方式皆可使用 ]
• background-position : 90% 90%; /*背景圖片x與y軸的位置*/
• background-position : top; /*向上對齊*/
• background-position : bottom; /*向下對齊*/
• background-position : left; /*向左對齊*/
• background-position : right; /*向右對齊*/
• background-position : center; /*置中對齊*/

色碼表應用 : (注意 : 有些數字色碼無支援應用在奇摩部落格當邊框顏色，無支援的貼上只會顯示灰色)

英文色碼表                數字色碼表

如果你已經備妥，點此進入自訂樣式 http://tw.blog.yahoo.com/setup/cus_style.php

左右欄位加框+底圖語法說明: (使用底圖這種語法，不能合併標題前小圖)

觀看效果，請前往 → 小精靈  去觀看加框之後的效果（以下語法是小精靈所分享）

/*左右欄位+有色邊框-小精靈語法*/

.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;}

1.選擇自己喜歡的圖片加進去，如果不加底圖只要框線，也可以不加圖片→ url( )

2.選擇外框的樣式→none、dotted、dashed、solid、double、groove、ridge、insert、 outset

3.設定框線顏色  → COLOR: white  

4.設定框線的粗細→border:5px;      （  如果你要框線粗些，增加數字就行了...　）

5.【編輯個人檔案】→【面板設定】→【自訂樣式】將   修改後的語法  貼進去就行了

  （如果你是將語法貼在『文章前小圖的語法』上面，系統就是抓到文章前ㄉ小圖。如果你是將語法貼在『文章前小圖的語法』下面，系統就是抓到框線的底圖。）

   （欲增加框與框的距離，只要在文章前小圖語法中，找到→margin-bottom:20px←這 段語法，依自己的偏好，修改距離）

/*Nav module list*文章前小圖*/
.ycntmod .mbd ul.list li {background:url(小圖網址) left .1em no-repeat;padding-left:20px;margin-bottom:3px;_margin-bottom:20px;_line-height:20px;}
.ycntmod .mbd ul.list li.more {margin:-3px 0 0 -3px;text-align:right;background:url(小圖網址) 40px center no-repeat;}