[06/29][傻兔教室]幾種實用邊框制作

月儿发表于 2006-6-29 20:00:41

<TABLE bgcolor=ivory width=100% border=2 cellpadding=50 cellspacing=25><TBODY><TR><TD><DIV align=center><BR><BR>

<P align=left><FONT size=4>由最基本開始 , 一個框(即一個 < TABLE>)<BR>(因為要方便大家看清楚 , 因此所用數值比較誇張 , <BR>大家運用時可要重新設置 , 否則效果自負 , 呵呵 ~~~~)</FONT></P>
<P><IMG src=http://i17.photobucket.com/albums/b51/lyh_/XYHC/b2da6f8a.jpg border=0></P>
<BR><TEXTAREA rows=6 cols=80><TABLE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/e105606c.jpg border=7 bordercolor=#777777 cellpadding=15 cellspacing=45><TBODY><TR><TD><IMG src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0 width=500></TD></TR></TBODY></TABLE></TEXTAREA><BR>

<BR><P align=left><FONT size=4>加點變化 , 剛才 < TD> 里是空白的 , <BR>現在在 <FONT color=red>< TD background=背景地址></FONT>里插入另一個背景. 看效果圖 : </FONT></P><BR>
<TABLE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/e105606c.jpg border=7 bordercolor=#777777 cellpadding=15 cellspacing=45><TBODY><TR><TD background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/ea486434.jpg><IMG src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0 width=500></TD></TR></TBODY></TABLE><BR><BR>
</DIV></TD></TR></TBODY></TABLE>
<BR><BR>

月儿发表于 2006-6-29 20:01:31

<TABLE bgcolor=ivory width=100% border=2 cellpadding=50 cellspacing=25><TBODY><TR><TD><DIV align=center><BR><BR>
<P align=left><FONT size=4>再來是兩層框框的 .. </FONT></P>
<P align=left><FONT color=red>**框框可自設 width 和height, 也可因應圖片尺寸設定, cellpadding, cellspacing 由系統默認 **</FONT></P><BR>
<TABLE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg border=15 bordercolor=#777777 cellpadding=15 cellspacing=45><TBODY><TR><TD>
<TABLE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg border=1 bordercolor=#777777 cellpadding=15 cellspacing=45><TBODY><TR><TD>
<IMG width=500 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE><BR>
<P><TEXTAREA cols=80 rows=8>
<TABLE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg border=15 bordercolor=#777777 cellpadding=15 cellspacing=45><TBODY><TR><TD>
<TABLE background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg border=1 bordercolor=#777777 cellpadding=15 cellspacing=45><TBODY><TR><TD>
<IMG width=500 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
</TD></TR></TBODY></TABLE>
</TD></TR></TBODY></TABLE><BR>
</TEXTAREA></P><BR>
<P align=left><FONT color=blue>**說明 : 看起來好像是用了四層表格 , 其實只用了兩層 , 同一個背景圖 , 主要是邊框各光和背光部分的顏色應用起來的效果 .<BR>也可嘗試在表格里 < TD>內插入 background, 看看出現什么效果 …</FONT></P><BR><BR>

</DIV></TD></TR></TBODY></TABLE>
<BR><BR>

[ 本帖最后由月儿于 2006-6-29 20:07 编辑 ]

月儿发表于 2006-6-29 20:15:39

<TABLE bgcolor=ivory width=100% border=2 cellpadding=50 cellspacing=25><TBODY><TR><TD><DIV align=center><BR><BR>
<P align=left><FONT size=4>這種效果其實有好幾種方法做出來 , 但是在我認為這是最簡單的 , 只要金色背景那層 (第二層) 表格的寬是 100% 其它屬性值一律為 0. 主要是在第三層 , 第三層的寬 width 的取值要是99%, 而第三層的td 里的 width 屬性要是 100%.</FONT></P><BR>
<table align="center" border="0" cellpadding="0" cellspacing="10" width="620" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg"><tbody><tr><td width="100%" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/749f22d1.gif"><tbody><tr><td width="100%" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="99%" background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg><tbody><tr><td width="100%" align="center">
<img width=500 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
<P><TEXTAREA cols=80 rows=8><table align="center" border="0" cellpadding="0" cellspacing="10" width="620" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg"><tbody><tr><td width="100%" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="90%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/749f22d1.gif"><tbody><tr><td width="100%" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="99%" background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg><tbody><tr><td width="100%" align="center">
<img width=500 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</TEXTAREA></P><BR>
</DIV></TD></TR></TBODY></TABLE>

brjsj 发表于 2006-6-30 10:34:16

月儿你的硬盘是块宝藏！

绯舞发表于 2006-6-30 13:21:49

非常形象生动易懂易学

月儿发表于 2006-6-30 23:49:58

<TABLE bgcolor=ivory width=100% border=2 cellpadding=50 cellspacing=25><TBODY><TR><TD><DIV align=center><BR><BR>
<P align=left><FONT size=4>這個沒什么特別 , 就是把四個角的框架用表格分開 </FONT></P><BR>

<table align="center" border="1" cellpadding="20" cellspacing="5" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg"><TBODY><tr><td width="100%" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg"><TBODY><tr><td width="100%" align="center">
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR>
<TD width="50%" align=left><img border="0" width=100 src="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/frame/lt-2.gif"></TD>
<TD width="50%" align=right><img border="0" width=100 src="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/frame/rt-2.gif"></TD>
</TR></TBODY></TABLE>
<img width=500 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR>
<TD width="50%" align=left><img border="0" width=100 src="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/frame/lb-2.gif"></TD>
<TD width="50%" align=right><img border="0" width=100 src="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/frame/rb-2.gif"></TD>
</TR></TBODY></TABLE>
</td></tr></TBODY></table>
</td></tr></TBODY></table><BR>
<P><TEXTAREA rows=12 cols=90><table align="center" border="1" cellpadding="20" cellspacing="5" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg"><TBODY><tr><td width="100%" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="680" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/8efa68fe.jpg"><TBODY><tr><td width="100%" align="center">
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR>
<TD width="50%" align=left><img border="0" width=100 src="左上框"></TD>
<TD width="50%" align=right><img border="0" width=100 src="右上框"></TD>
</TR></TBODY></TABLE>
<img width=500 src=圖片地址 border=0>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0><TBODY><TR>
<TD width="50%" align=left><img border="0" width=100 src="左下框"></TD>
<TD width="50%" align=right><img border="0" width=100 src="右下框"></TD>
</TR></TBODY></TABLE>
</td></tr></TBODY></table>
</td></tr></TBODY></table></TEXTAREA></P><BR>
</DIV></TD></TR></TBODY></TABLE>
<BR><BR>

月儿发表于 2006-6-30 23:50:48

<TABLE bgcolor=ivory width=98% border=2 cellpadding=50 cellspacing=25><TBODY><TR><TD><DIV align=center><BR><BR>
<P align=left><FONT size=4>把圖片應用到邊框上面 , 整個表格的大小很重要的 . 調整也是件頗費時的事情 , 所以建議大家在用表格格線 (厚度) cellspacing 的屬性值或是表格格線 (間距) cellpadding 的屬性值來調整, 這方法比較容易掌控 .</FONT></P><BR>

<center>
<table align="center" border="1" cellpadding="0" cellspacing="40" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/e105606c.jpg" bordercolorlight="#C0B4FE" bordercolordark="#0C091D">
<tbody>
<tr>
<td width="100%" align="center">
<table align="center" border="1" cellpadding="0" cellspacing="18" width="100%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/golden/c009cc02.jpg" bordercolor="#C0B4FE">
<tbody>
<tr>
<td width="100%" align="center">
<table align="center" border="0" cellpadding="18" cellspacing="0" width="100%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/302e25a6.jpg">
<tbody>
<tr>
<td width="100%" align="center">
<img width=500 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</center><BR><BR>
<P><TEXTAREA rows=15 cols=80><center>
<table align="center" border="1" cellpadding="0" cellspacing="40" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/e105606c.jpg" bordercolorlight="#C0B4FE" bordercolordark="#0C091D">
<tbody>
<tr>
<td width="100%" align="center">
<table align="center" border="1" cellpadding="0" cellspacing="18" width="100%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/golden/c009cc02.jpg" bordercolor="#C0B4FE">
<tbody>
<tr>
<td width="100%" align="center">
<table align="center" border="0" cellpadding="18" cellspacing="0" width="100%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/302e25a6.jpg">
<tbody>
<tr>
<td width="100%" align="center">
<img width=500 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</center>
</TEXTAREA></P><BR>
</DIV></TD></TR></TBODY></TABLE>

不弃发表于 2006-7-3 22:12:11

<center>
<table align="center" border="10" cellpadding="0" cellspacing="40" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/e105606c.jpg" bordercolorlight="#C0B4FE" bordercolordark="#0C091D">
<tbody>
<tr>
<td width="100%" align="center">
<table align="center" border="10" cellpadding="0" cellspacing="30" width="100%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/golden/c009cc02.jpg" bordercolor="#C0B4FE">
<tbody>
<tr>
<td width="100%" align="center">
<table align="center" border="10" cellpadding="0" cellspacing="30" width="100%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/golden/c009cc02.jpg" bordercolor="#C0B4FE">
<tbody>
<tr>

<td width="100%" align="center">
<table align="center" border="0" cellpadding="0" cellspacing="10" width="100%" background="http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/set/e105606c.jpg">
<tbody>
<tr>
<td width="10%" align="center">
<img width=200 src=http://i17.photobucket.com/albums/b51/lyh_/lovers%20N%20kiss/lover-38.jpg border=0>
<tr>
<td width="10%" align="center">
嘿嘿....<tr>

<td width="10%" align="center">
谢谢了....<tr>

<td width="10%" align="center">
老师们...<tr>
<tr>
<td width="10%" align="center">
<img width=400 src=http://www.xyhc.com/attachments/month_0607/1_mpLQmmHW5ZDW.gif border=0>
<tr>

</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</td></tr></tbody></table>
</center>

<tr>
文字那么处理很痛苦.师傅呀!帮帮偶!!!!<tr>

[ 本帖最后由不弃于 2006-7-4 01:23 编辑 ]

爱在雨天 发表于 2006-7-3 22:48:22

月儿发表于 2006-7-4 16:55:23

期待大家的功課啊 !!
<BR> 不要再猶疑了 ..
<BR>要快啊 ~~~~~~~~

页: [1] 2

新萤火虫论坛's Archiver

[06/29][傻兔教室]幾 種 實 用 邊 框 制 作

[06/29][傻兔教室]幾種實用邊框制作