文章+多層顏色圖框應用
是否常看到格友的格子有好多漂亮的文章加圖框，以下範例給想學習的格友做參考(二度空間)文章圖框應用編輯
|
這裡編輯文章內容或加入圖片
圖片範例
應用語法：(瀏覽文字請反白)
<table cellpadding="10" cellspacing="5" border="7" style="border-style:outset;border-color:#8000ff;" bgcolor="#FF0000">
<tr>
<td background="http://i1.tinypic.com/ohmhyb.gif">
<table cellpadding="10" cellspacing="5" border="7" style="border-style:ridge;border-color:#ff0000;" bgcolor="#FFFF00">
<tr>
<td background="">
<table cellpadding="10" cellspacing="5" border="7" style="border-style:double;border-color:#008000;" bgcolor="#FF00FF">
<tr>
<td background="http://kr.img.blog.yahoo.com/ybi/1/d4/73/wiwi0932/folder/45/img_45_884_6?1142658806.gif">
<table cellpadding="10" cellspacing="5" border="6" style="border-style:dotted;border-color:#FF0000;" bgcolor="#FFCCFF">
<tr>
<td background="http://i1.tinypic.com/ohmigw.gif">
<p align="center">
<b><font color="#008000" size="6">這裡編輯文章內容或加入圖片</font></b><br><br>
<font size="7" color="#008000"><b>圖片範例</b></font><br><br>
<img border="0" src="http://xs223.xs.to/xs223/08010/a20080106.gif" width="391" height="416"><font color="#008000">
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table> |
語法解說： (應用在奇摩，請勿用以下語法解說貼入文章應用，會產生邊框線消失錯誤，請使用上面的)
<table cellpadding="10" /*圖框擴充寬度*/ cellspacing="5" /*色框擴充寬度*/ border="7" /*框線粗細*/ style="border-style:outset;/*框線條樣式*/border-color:#8000ff;/*框線顏色*/" bgcolor="#FF0000" /*框線與框線之間背景色*/>
<tr>
<td background="http://i1.tinypic.com/ohmhyb.gif"><!--/*框線與框線之間背景圖*/-->
<table cellpadding="10" /*圖框擴充寬度*/ cellspacing="5" /*色框擴充寬度*/ border="7" /*框線粗細*/ style="border-style:ridge;/*框線條樣式*/border-color:#ff0000;/*框線顏色*/" bgcolor="#FFFF00" /*框線與框線之間背景色*/>
<tr>
<td background=""><!--/*圖框網址不加入，只呈現底色*/-->
<table cellpadding="10" /*圖框擴充寬度*/ cellspacing="5" /*色框擴充寬度*/ border="7" /*框線粗細*/ style="border-style:double;/*框線條樣式*/border-color:#008000;/*框線顏色*/" bgcolor="#FF00FF" /*框線與框線之間背景色*/>
<tr>
<td background="http://kr.img.blog.yahoo.com/ybi/1/d4/73/wiwi0932/folder/45/img_45_884_6?1142658806.gif"><!--/*框線與框線之間背景圖*/-->
<table cellpadding="10" /*圖框擴充寬度*/ cellspacing="5" /*色框擴充寬度*/ border="6" /*框線粗細*/ style="border-style:dotted;/*框線條樣式*/border-color:#FF0000;/*框線顏色*/" bgcolor="#FFCCFF" /*框線與框線之間背景色*/>
<tr>
<td background="http://i1.tinypic.com/ohmigw.gif"><!--/*框線與框線之間背景圖*/-->
<p align="center"><!--/*文章內容置中*/-->
<b><font color="#008000" size="6">這裡編輯文章內容或加入圖片</font></b><br><br><!--/*font color="#008000"字體顏色 size="6"字體大小 face="標楷體"字型-b為粗體字(不加入即為正常字體)-br為隔行(也可使用<p></p>分行)*/-->
<font size="7" color="#008000" face="標楷體"><b>圖片範例</b></font><br><br>
<img border="0" src="http://xs223.xs.to/xs223/08010/a20080106.gif" /*內容圖片網址*/ width="391" height="416"><font color="#008000"><!--/*以下為語法結語*/-->
</font></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
|
框線樣式 : ( 無、 點線、 實線、 雙線、 溝線、 脊線、嵌入線、浮出線 )
相對應語法 : none︱ dotted｜solid︱ double︱ groove︱ ridge︱ inset︱ outset
注意！邊框顏色 style="border-style:outset;border-color:#8000ff;" 於文章發表後，奇摩語法過濾修正程式自動產生為：style="BORDER-LEFT-COLOR: #8000ff; BORDER-BOTTOM-COLOR: #8000ff; BORDER-TOP-STYLE: outset; BORDER-TOP-COLOR: #8000ff; BORDER-RIGHT-STYLE: outset; BORDER-LEFT-STYLE: outset; BORDER-RIGHT-COLOR: #8000ff; BORDER-BOTTOM-STYLE: outset"
| | | |
